0

I'm using insertAtCaret function and it works well with a text area. I'm searching for a solution to change the text area by a content editable div. I changed the text area by a div but it doesn't work.





    $(document).ready( function() 
    {
     $('#list li').click(function() { 
      $("#mytextarea").insertAtCaret($(this).text());
      return false
     });
    });

    $.fn.insertAtCaret = function (myValue) {
     return this.each(function(){
       //IE support
       if (document.selection) {
         this.focus();
         sel = document.selection.createRange();
         sel.text = myValue;
         this.focus();
       }
       //MOZILLA / NETSCAPE support
       else if (this.selectionStart || this.selectionStart == '0') {
         var startPos = this.selectionStart;
         var endPos = this.selectionEnd;
         var scrollTop = this.scrollTop;
         this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
         this.focus();
         this.selectionStart = startPos + myValue.length;
         this.selectionEnd = startPos + myValue.length;
         this.scrollTop = scrollTop;
       } else {
         this.value += myValue;
         this.focus();
       }
     });
    };


    #sidediv li{cursor:pointer;}


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="sidediv">
        <ul id="list">
          <li>Client first name</li>
          <li>lastname</li>
          <li>username</li>
        </ul>
    </div>
    <textarea name="mytextarea" id="mytextarea" cols="70" rows="10">Hello!</textarea>
Gaël Barbin
  • 3,769
  • 3
  • 25
  • 52
Nadia
  • 189
  • 1
  • 3
  • 12
  • Please define "it doesn't work". What you expect your code to do, and what it does instead? – Teemu Feb 17 '16 at 17:19
  • sorry my english is very bad, I want to reproduce the same thing with a div, I want to insert the clicked text at a cursor position into the content editable div. but it doesn't do any thing – Nadia Feb 17 '16 at 17:22
  • Possible duplicate of [selectionStart and selectionEnd in contenteditable element](http://stackoverflow.com/questions/19288700/selectionstart-and-selectionend-in-contenteditable-element) – Gaël Barbin Feb 17 '16 at 17:28
  • I found this solution [link](http://jsfiddle.net/VzbYJ/32/) , and it does exactly what I want but instead of clicking on button should click on a div, but with the div it insert always the text at the end and not at the cursor position. – Nadia Feb 17 '16 at 19:43

0 Answers0