Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Html / Javascript

Detect Links In Textarea And Input

Post a Comment
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 textareavar ts = document.getElementById("obs");
    // get our empty divvar linksDiv = document.getElementById("links");
    // remove any empty spacevar 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 herevar links = '';
    // for all links we will add// ID if you need// Class so we can posision all links by CSSfor (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 --><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS --><linkrel="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><divid="container"class="col-md-12 form-group"><divid="navi"class="col-md-9"><textareaid="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><divid="links"></div></div></div><script>// get your textareavar ts = document.getElementById("obs");
    // get our empty divvar linksDiv = document.getElementById("links");
    // remove any empty spacevar 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 herevar links = '';
    // for all links we will add// ID if you need// Class so we can posision all links by CSSfor (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 --><scriptsrc="https://code.jquery.com/jquery-3.2.1.slim.min.js"integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"crossorigin="anonymous"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"crossorigin="anonymous"></script><scriptsrc="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 summary

Permitted 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"