Detect Links In Textarea And Input
I want to allow users to put hyperlinks inside this textarea or in input and them to be clickable using AngularJS, JavaScript:
Solution 1:
I am done this for you using this simple technique, I will create an empty Div and then fill it with links which is generated from a TextArea separated each "text link" by a semicolon,
The only thing I didn't do for you is to apply some CSS to style our link as text, I am sure you can do that, it's an easy task.
like this test1.com;test2.com;test3.com, in this case we have 3 websites but they are in text mode, here is how I did this for you:
<div id="container" class="col-md-12 form-group">
<div id="navi" class="col-md-9">
<textarea id="obs" class="sigma-form-simple-search-input large-size"
rows="5" ng-model="commandeHdr.obs"
ng-change="hasChanges.parameter=true" cols="100" rows="10">
test1.com;test2.com;test3.com
</textarea>
<div id="links">
</div>
</div>
</div>
here is my Javascript for doing this task...
<script>
// get your textarea
var ts = document.getElementById("obs");
// get our empty div
var linksDiv = document.getElementById("links");
// remove any empty space
var urls = ts.value.trim();
// split our links by ;
var urlsArr = urls.split(';');
// get back all new item in original posision, index 3 will be in 1 so I will revese they array...
urlsArr.reverse();
//Cleaned from space....
ts.value = urlsArr;
// our links will be hold here
var links = '';
// for all links we will add
// ID if you need
// Class so we can posision all links by CSS
for (var i in urlsArr) {
links = "<a class='genlinks' id = '"+i+"' href="+urlsArr[i]+">"+urlsArr[i]+";</a>" + links;
}
// now update our div
linksDiv.innerHTML = links;
</script>
And a simple CSS you need is
<style>
#container {
width: 100px;
height: 100px;
position: relative;
}
#links {
width: 100%;
height: 100%;
position: absolute;
top:3px;
left: 18px;
}
#links {
z-index: 5;
}
</style>
Please let me know if your problem didn't solve. happy coding.
This is the entire HTML file that I had used.
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>awatitwork</title>
<style>
#container {
width: 100px;
height: 100px;
position: relative;
}
#links {
width: 100%;
height: 100%;
position: absolute;
top:3px;
left: 18px;
}
#links {
z-index: 5;
}
</style>
</head>
<body>
<div id="container" class="col-md-12 form-group">
<div id="navi" class="col-md-9">
<textarea id="obs" class="sigma-form-simple-search-input large-size" rows="5" ng-model="commandeHdr.obs" ng-change="hasChanges.parameter=true" cols="100" rows="10">
test1.com;test2.com;test3.com
</textarea>
<div id="links">
</div>
</div>
</div>
<script>
// get your textarea
var ts = document.getElementById("obs");
// get our empty div
var linksDiv = document.getElementById("links");
// remove any empty space
var urls = ts.value.trim();
// split our links by ;
var urlsArr = urls.split(';');
// get back all new item in original posision, index 3 will be in 1 so I will revese they array...
urlsArr.reverse();
//Cleaned from space....
ts.value = urlsArr;
// our links will be hold here
var links = '';
// for all links we will add
// ID if you need
// Class so we can posision all links by CSS
for (var i in urlsArr) {
links = "<a class='genlinks' id = '"+i+"' href="+urlsArr[i]+">"+urlsArr[i]+";</a>" + links;
}
// now update our div
linksDiv.innerHTML = links;
</script>
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Solution 2:
The only allowed content of <textarea> elements is text.
From the Docs:
<textarea>Technical summaryPermitted content: Text Tag omission: None, both the starting and ending tag are mandatory.
For more information, see
Post a Comment for "Detect Links In Textarea And Input"