Using Javascript .focus() highlights text

Question

I have a form like so:

<form action='word.php' name = 'searchbox'>
<input type='text' name='word' id = 'searchbox' value = 'default'>
</form>

In my body I have:

<body onLoad="searchbox.word.focus()">

You can see the fiddle here: http://jsfiddle.net/WEZ7S/

What I'm trying to achieve is just have a blinking cursor at the end of "default", but instead the whole word gets selected instead.

Surprisingly Google hasn't been able to find any solutions. How would I do this?

possible duplicate of [jQuery .focus() is highlighting all pre-filled text](http://stackoverflow.com/questions/13371430/jquery-focus-is-highlighting-all-pre-filled-text) — Michael Berkowski, Dec 03 '12 at 02:48

score 3 · Answer 1 · edited May 23 '17 at 12:27

3

You can get around this by resetting the .value property of the element:

searchbox.word.focus();
searchbox.word.value = searchbox.word.value;

edited May 23 '17 at 12:27

Community

answered Dec 03 '12 at 02:48

Blender

Awesome, this worked in Safari and Chrome but not Firefox. Any way around that? – Snowman Dec 03 '12 at 02:52
@mohabitar: Look at the long answer in the question that I linked to. It's a jQuery plugin, so you'll need jQuery to use it. – Blender Dec 03 '12 at 02:54

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

1

Here's a nifty little trick:

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

edited May 23 '17 at 12:12

Community

answered Dec 03 '12 at 02:47

ahren

@mohabitar - yes it does, I'm on chrome. It's probably because it's a jQuery solution and you were just asking about javascript. See blender's answer for a pure JS workaround. – ahren Dec 03 '12 at 02:56
1

Ok just got it to work in my code on all browsers after fiddling around, thanks! – Snowman Dec 03 '12 at 03:53
Great trick... However, when I use this, it also forces `autofocus` on that field. In my case, I would need to `autofocus` another field, then, for example, if tab were pressed to go to field in question, then the behavior in question would occur... – nicorellius Mar 08 '14 at 22:23

score 0 · Answer 3 · answered Dec 03 '12 at 02:51

0

var len = searchbox.word.length;

searchbox.word.focus();
searchbox.word.setSelectionRange(len, len);

answered Dec 03 '12 at 02:51

David G

3 Answers3