locked
How to move cursor to end of contenteditable entity RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1636110173 posted
    <div class="container">
<iframe>
<html>
<body contenteditable="true">fddsfg fds dgdfgdsgfdsgds
</body

</html>
</iframe>

</div

https://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity







I tried above link in both ways like below.



setCaretToEnd('.richeditor .container');

//var s= $('.richeditor .container');

//setEndOfContenteditable(s);



but, Still, the cursor is nr working...Any help appreciated.
    Saturday, December 15, 2018 10:52 PM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-1811426859 posted

    That is because you are using iframe , you can get the iframe content by :

    https://stackoverflow.com/questions/1088544/get-element-from-within-an-iframe 

    Monday, December 17, 2018 9:47 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-893317190 posted

    Hi sarathi2006,

    You could try the code below to move the cursor.

    <script src="../Scripts/jquery-1.9.1.js"></script>
</head>
<body>


    <div class="container">
      

            <div id="div" contenteditable="true">fddsfg fds dgdfgdsgfdsgd
            </div>
            <input id="input" type="text" value="12345" />

     

</div>
    <script>
        $(function () {
           
          $("#div").focus();
            var html = $("#div").html();
          

                $("#div").html("");
                try {
    //  prevent ie showing error, please use try catch , this only works in chrome
                    document.execCommand("insertHTML", "false", html)
                } catch (e) {

                }
     // the link you provided shows how to do in ie
            if ($("#div").html() == "") {
                $("#div").html(html)
                range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
                range.moveToElementText(document.getElementById("div"));//Select the entire contents of the element with the range
                range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
                range.select();


            }
     
            
        })
    </script>

    The result.

    Best regards,

    Ackerly Xu

    Tuesday, January 8, 2019 3:24 AM