Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    91
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Duplicate a hightlight in second textarea.

    Hi,

    I may be going out on a limb here.

    As example. I have two textareas which contain the same text such as "What a nice day".

    Is there a way to highlight the word "nice" in textarea(A) and have the same highlight appear in textarea(B) highlighting the same word "nice", in real time.

    Martin.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,086
    Thanks
    23
    Thanked 593 Times in 592 Posts
    I have played with this and don't believe a text area can contain markup. You could use a div and spans to do this if it's one way, highlighting in area one only.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,294
    Thanks
    10
    Thanked 583 Times in 564 Posts
    set the following properties from one to another: .value, .selectionStart, and .selectionEnd
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,086
    Thanks
    23
    Thanked 593 Times in 592 Posts
    @rnd me - While I understand .value retrieves and writes text to an textarea and we can control where that is placed by the .selectionStart, and .selectionEnd. I would like an example where text can be highlighted.

    What I tried was adding spans. That did not work for me. I'd like to see your method.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,294
    Thanks
    10
    Thanked 583 Times in 564 Posts
    selection is the only highlighting available to <textarea>s.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,086
    Thanks
    23
    Thanked 593 Times in 592 Posts
    an example please.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,915
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Code:
    <html>
    <head>
    
    <style type="text/css">
    .highLight {font-family: arial; font-size: 12pt; color: #FF0000; font-weight: bold; background-color:#B0C4DE; }
    </style>
    
    </head>
    
    <body onload = "findwords()">
    
    <textarea id = "myta" rows = "15" cols = "75" onkeyup = "findwords()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum "leo", scelerisque at dapibus ac, consectetur vel ipsum. Morbi et metus ut diam molestie ullamcorper. Suspendisse rutrum semper semper. Donec volutpat neque in lorem tempus scelerisque. Curabitur dignissim rhoncus quam ac suscipit. Donec viverra quam lobortis neque porta a sagittis urna tristique. Suspendisse nec lacus nisi. Pellentesque fermentum massa sit amet magna hendrerit vestibulum? Sed elit libero, scelerisque eu eleifend ut, interdum gravida nunc. Etiam ut nisi sapien, et tempus sem. Nam vel mi est. Mauris congue felis ut ante bibendum vehicula. Nullam nec sapien arcu, eget cursus lorem. Donec blandit, dolor tristique ornare dictum, arcu sapien vulputate dolor, et placerat risus odio ut magna! Ut magna Mauris, pellentesque at ultricies vitae, fermentum vitae dolor. </textarea>
    <br><br>
    <div id = "hText"></div>
    
    <script type = "text/javascript">
    
    // Note textarea can only support plain text so highlighted results must be in a div
    
    function findwords() {
    
    var words = ["lorem", "dolor", "massa", "magna", "mauris"];
    var text = document.getElementById("myta").value;
    document.getElementById("hText").innerHTML = text;
    text = text.split(" ");
    //alert (text);  // for testing
    
    for (var i=0; i<text.length; i++) {
    for (var j=0; j<words.length; j++) {
    var temp = text[i];
    var templc = temp.toLowerCase();
    templc = templc.replace(/[^a-z0-9]/gi,"");  // strip punctuation
    if (templc == words[j].toLowerCase()) {  // find whole words only
    //alert (temp);  // for testing
    var repval = "<span class='highLight'> " + temp + " <\/span>"
    text[i] = repval;
    var output = text.join(" ");
    document.getElementById("hText").innerHTML=output;
    }
    }
    }
    
    }
    
    </script>
    
    </body>
    </html>
    Last edited by Philip M; 04-30-2013 at 04:05 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,086
    Thanks
    23
    Thanked 593 Times in 592 Posts
    // Note textarea can only support plain text so highlighted results must be in a div
    Which is what I have been saying.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •