how to avoid cursor moving back when typing using javascript

Question

While entering value in the textbox, when I enter value in between the entered value cursor moves automatically to the end of the value.

<!DOCTYPE html>
<html>
    <body>
        <script>
        function truncate(x) {
            if(x.value.length > 0) 
            {               
                x.value = x.value.replace(/^\s+/, '');
            }
        }
        </script>

        <input id="otherText" onkeyup="javascript:truncate(this);" maxlength="12" type="text"/>

    </body>
</html>

possible duplicate of [Changing input value while still allowing the user to type](http://stackoverflow.com/questions/7217176/changing-input-value-while-still-allowing-the-user-to-type); I'd assume there are more similar but I can't find them — Bergi, Mar 07 '13 at 14:07

score 0 · Answer 1 · answered Mar 07 '13 at 13:00

<!DOCTYPE html>
<html>
<body>



<script>
function truncate(x){
var val = document.getElementById("otherText");

var inputTextValue = val.value;
if(inputTextValue.length>0) 
    { 

    val.value = '';

}
}
</script>
<input id="otherText" onkeyup="javascript:truncate(this);"   maxlength="12" type="text"/> </body>
</html>

Please note I don't know how to replace the string with specific regular expression. But the above code just replace with a empty string. You can modify as per your requirement.

No it replaces all value as empty so we cant use this – user2143039 Mar 07 '13 at 13:20 — user2143039, Mar 07 '13 at 13:20

score 0 · Answer 2 · edited May 23 '17 at 12:27

try this

http://jsfiddle.net/DDQSU/2/

$(function() {

    function setCaretPosition(elemId, caretPos) {
        var elem = elemId
        if(elem != null) {
        if(elem.createTextRange) {
           var range = elem.createTextRange();
           range.move('character', caretPos);
           range.select();
        }
        else {
           if(elem.selectionStart) {
              elem.focus();
              elem.setSelectionRange(caretPos, caretPos);
           }
           else
              elem.focus();
        }
    }
}

$("#otherText").on("keyup", function(event){
                            var x = this,sel=x.selectionStart;
                            if(x.value.length > 0) 
                            {               
                                x.value = x.value.replace(/^\s+/g, '');
                            }
                            setCaretPosition(x,sel);
                        })
                 })

The solution was already there at Set keyboard caret position in html textbox

This question is a duplicate of Javascript, avoid cursor moving at textbox end

how to avoid cursor moving back when typing using javascript

2 Answers2