Move cursor position to end in javascript

Question

I'm doing a Twitter like text box. If textbox length exceeds 15 characters they should be displayed in red color. So I have appended 2 spans inside div. Whenever the character appended pointer will move to starting position. I want it to be at the end. Any one please help me! Thank-you!

Visit https://jsfiddle.net/08dmhecp/2/

Or

var tweeet = document.getElementById('tweeet');

tweeet.onkeyup = function(event) {
 var newTweeet = tweeet.textContent;
 if(newTweeet.length > 15){
  tweeet.textContent = "";
  var content = document.createElement('span');
  var extra = document.createElement('span');
  content.textContent = newTweeet.slice(0, 15);
  extra.textContent = newTweeet.slice(15, newTweeet.length)
  extra.style.color = 'red';
  tweeet.appendChild(content);
  tweeet.appendChild(extra);
 } 
};

.tweeet {
    width: 50%;
    height: 100px;
    border-style: inset;
    border-width: 5px;
    border-color: blue;
    background-color: #cccccc;
    margin: 3px;
    padding: 5px;
    float: left;
}

<div class="tweeet" id="tweeet" contenteditable="true"></div>

[here's](https://jsfiddle.net/08dmhecp/7/) an updated fiddle. I used the method `placeCaretAtEnd(element)` found [here](https://stackoverflow.com/a/17853375/3789527) — LS_, Jul 19 '18 at 10:35

score 0 · Accepted Answer · answered Jul 19 '18 at 11:04

This will work for sure, I tested it:

var tweeet = document.getElementById('tweeet');

tweeet.onkeyup = function(event) {
    var newTweeet = tweeet.textContent;
    if(newTweeet.length > 15){
        tweeet.textContent = "";
        var content = document.createElement('span');
        var extra = document.createElement('span');
        content.textContent = newTweeet.slice(0, 15);
        extra.textContent = newTweeet.slice(15, newTweeet.length)
        extra.style.color = 'red';
        tweeet.appendChild(content);
        tweeet.appendChild(extra);

        let s = window.getSelection()
        let r = document.createRange()
        r.setStart(tweeet, tweeet.childElementCount)
        r.setEnd(tweeet, tweeet.childElementCount)
        s.removeAllRanges()
        s.addRange(r)

    }   
};

Move cursor position to end in javascript

1 Answers1