Focus input field with JQuery without selecting current value text

Question

$("#myinputfield").focus();

Doing that on an input field with it's value already set causes the current value to be selected. How can I focus the field without selecting the text?

Why would you want to do this? If you tab to a field it is also selected. This is standard user behavior. Where do you expect the caret to be? (Start of the text? End of the text?) — Phrogz, Apr 11 '12 at 17:46
@Phrogz it could behave the same way textareas do now (contents are not selected when tabbing into one). It's not the same across browsers but as long as it's consistent.. — MSpreij, Apr 07 '17 at 12:33

score 27 · Accepted Answer · answered Nov 18 '09 at 15:57

27

I've searched around a bit and kinda found out that you should re-set your value into the desired field after it is focussed on.

answered Nov 18 '09 at 15:57

Ben Fransen

10,884
18
76
129

See http://stackoverflow.com/questions/13371430/jquery-focus-is-highlighting-all-pre-filled-text – cssyphus Feb 17 '14 at 05:00
2

This doesn't appear to work in chrome when the field is tabbed into. – Dom Vinyard Feb 28 '14 at 12:32

score 26 · Answer 2 · answered Nov 18 '09 at 16:04

26

How about something like this where you set the value of the input field to itself after focusing it?

$("#myinputfield").focus().val($("#myinputfield").val());

answered Nov 18 '09 at 16:04

bensie

5,373
1
31
34

score 7 · Answer 3 · answered Oct 15 '12 at 09:17

Other answers suggest setting the value of the input field to itself after focusing it. If in Firefox, the cursor appears at the start of the input and you want it at the end, then a slight modification is required. You will have to set the value as empty first and then set it to the previous value.

var value = $("#myinputfield").val();
$("#myinputfield").focus().val('').val(value);

score 3 · Answer 4 · answered Nov 18 '09 at 16:39

3

Have you tried this?

var txt = $("#myinputfield").val();
$("#myinputfield").focus();
$("#myinputfield").val( txt );

answered Nov 18 '09 at 16:39

cwallenpoole

79,954
26
128
166

score 0 · Answer 5 · answered Jul 19 '13 at 03:41

function focusField(id){
    var inputField = document.getElementById(id);
    if (inputField != null && inputField.value.length != 0){
        if (inputField.createTextRange){
            var FieldRange = inputField.createTextRange();
            FieldRange.moveStart('character',inputField.value.length);
            FieldRange.collapse();
            FieldRange.select();
        }else if (inputField.selectionStart || inputField.selectionStart == '0') {
            var elemLen = inputField.value.length;
            inputField.selectionStart = elemLen;
            inputField.selectionEnd = elemLen;
            inputField.focus();
        }
    }else{
        inputField.focus();
    }
}

score 0 · Answer 6 · answered Mar 11 '14 at 21:02

$(document).ready(function() {
    var $field = $("#formloginusername"),
        oldVal = $field.val();
    $field.focus().val('').val(oldVal);
});

DEMO: http://jsfiddle.net/X7Y8S/

i took the code & demo from ahren's answer in other topic, i think it's helpful.

score 0 · Answer 7 · answered Aug 13 '15 at 10:04

0

This solution works very well for me:

$("#myinputfield").focus(function (event) {
  var value = $("#myinputfield").val();
  setTimeout(function() {
    $("#myinputfield").val(value);
  },10);
});

answered Aug 13 '15 at 10:04

paulmaszlik

1
2

Focus input field with JQuery without selecting current value text

7 Answers7

Linked

Related