Set focus to the end of input tag by javascript

Question

Salut. i have some problem with javascript..

I made translate script, that allows Georgian users type Georgian by Latin alphabet. So, when i manipulate on input tag, i can't set focus to the end of the text.. correctly, cursor is in the end of text but if text is much bigger than input tag, it must scroll automatically and must not hide.

here's code..

$(document).ready(function() {
    $(".geok").geokbd();
});
$.fn.geokbd = function() {
    symbols = "abgdevzTiklmnopJrstufqRySCcZwWxjh";
    this.relatedCheckbox = $("<input type=\"checkbox\" name=\"geokbd\" />").attr('checked', true);
    $(this).after(this.relatedCheckbox);
    $(this).keypress(
        function(e) {
            if ((e.charCode) == 96) {
                if ($(this).next('input').attr('checked')) {
                    $(this).next('input').attr('checked', false);
                } else {
                    $(this).next('input').attr('checked', true);
                }
                    return false;
                }
                if ($(this).next('input').attr('checked')) {
                    if ((index = symbols.indexOf(String.fromCharCode(e.charCode))) >= 0) {
                        ret = String.fromCharCode(index + 4304);
                            this.focus();
                            var scrollTop = this.scrollTop, 
                            start = this.selectionStart, 
                            end = this.selectionEnd;

                            var value = this.value.substring(0, start)  + ret + this.value.substring(end,this.value.length);

                            this.value = value;
                            this.scrollTop = scrollTop;
                            this.selectionStart = this.selectionEnd = start + ret.length;

                            return false;
                        }
                    }

                }
        );
}

thanks

As i understand reason is that i manually insert Value for input element and i return false on keypress. If i return true, everythings ok but unnecessary symbols. — , Mar 23 '11 at 10:21

score 0 · Answer 1 · edited May 23 '17 at 12:18

There are several good answers from

Use JavaScript to place cursor at end of text in text input element

For example, you can use

        <input id="search" type="text" value="mycurrtext" size="30" 
        onfocus="this.value = this.value;" name="search"/>

Or you can use the JQuery plugin: PutCursorAtEnd. The author even posted the source code there and I tested that this works for Opera.

score 0 · Answer 2 · answered Mar 23 '11 at 09:22

0

get the id of last input tag and replave name with that id , below is basic logic

<script type="text/javascript">
function setFocus()
{
     document.getElementById("name").focus();
}
</script>
</head>

<body onload="setFocus()">
  <form>
       Name: <input type="text" id="name" size="30"><br />
       Surname: <input type="text" id="surname" size="30"> 
  </form>
</body>

answered Mar 23 '11 at 09:22

xkeshav

53,360
44
177
245

1

Read the whole question, not only the title. – Thomas Menga Mar 23 '11 at 09:48

score 0 · Answer 3 · answered Mar 23 '11 at 10:03

Have you tried this :

function doSetCaretPosition (oField, iCaretPos) {
    // IE Support
    if (document.selection) {
        // Set focus on the element
        oField.focus ();
        // Create empty selection range
        var oSel = document.selection.createRange();
        // Move selection start and end to 0 position
        oSel.moveStart ('character', -oField.value.length);
        // Move selection start and end to desired position
        oSel.moveStart ('character', iCaretPos);
        oSel.moveEnd ('character', 0);
        oSel.select ();
    }
    // Firefox support
    else if (oField.selectionStart || oField.selectionStart == '0') {
        oField.selectionStart = iCaretPos;
        oField.selectionEnd = iCaretPos;
        oField.focus ();
    }
}
$(document).ready(function() {
    $("#yourElement").focus();
    doSetCaretPosition(document.getElementById("yourElement"),999);
});

(source : http://www.webdeveloper.com/forum/archive/index.php/t-74982.html )

i dont want to set focus on document.ready.. i want it on keypress. so, it doesn't work — , Mar 25 '11 at 07:48

Set focus to the end of input tag by javascript

3 Answers3