Auto-highlight an input field on focus

Question

I was wondering if there was a way for text inside a input box (pre loaded using value="") to highlight when the user clicks on it?

input type='text' name='url' id='url' value='http://www.a-link.com/' />

EDIT

I need the text to he highlighted so the user can copy it.

..and for input type="number"? – Kieran Ryan Dec 10 '20 at 11:54 — Kieran Ryan, Dec 10 '20 at 11:54

score 86 · Accepted Answer · answered Jul 27 '11 at 16:30

86

<input type="text" name="textbox" value="Test" onclick="this.select()" />

answered Jul 27 '11 at 16:30

tskuzzy

35,812
14
73
140

1

1) If you bind it to `onfocus` instead of `onclick` then it will work for keyboard navigation as well as mouse clicks. 2) You can also access the input field from the emitted event object instead of from `this`. E.g. for react you can do ` e.target.select()} />` – Cam Jackson Oct 14 '21 at 10:02
Great answer, including the onfocus suggestion. I found a number of other suggestions, though all of them required JavaScript. – Cincy Steve May 22 '23 at 14:52

score 17 · Answer 2 · answered Jul 27 '11 at 16:45

You could attach javascript to the click event to select the text like so:

$(document).ready( function() {
  $('#id').click( function( event_details ) {
    $(this).select();
  });
});

There is a potential issue where the user could be trying to click at a later point in the text to correct a typing mistake and end up selecting the whole thing. A better way would be to trigger this when the input gets focus from the user. you'd replace .click with .focus in the example above.

jQuery event documentation: http://api.jquery.com/category/events/

This is similar to the top answer, but done unobtrusively, which is considered to be more proper. — Brad Werth, Aug 31 '12 at 17:56

score 14 · Answer 3 · answered Aug 06 '12 at 21:22

Add the following onclick attribute to make the entire <input> automatically highlight when the user clicks on it:

<input type="text" value="Test1" onclick="this.select()" />

Alternatively, if you want the user to be able to change the selection after the initial click, change the onclick attribute to an onfocus attribute. This will also highlight the entire <input> when the user clicks on it, but it allows them to change the highlighted part manually afterwards:

<input type="text" value="Test2" onfocus="this.select()" />

Here is an example of both inputs in action.

score 3 · Answer 4 · answered Jul 27 '11 at 16:27

3

You want to use focus property. Like this: http://jsfiddle.net/sCuNs/

html

  <p><input type="text" size="40"></p>

css

input:focus, textarea:focus{
background-color: green;
}

answered Jul 27 '11 at 16:27

user194076

8,787
23
94
154

Thanks, but I need the text to he highlighted so the user can copy it. – Jay Jul 27 '11 at 16:32

score 2 · Answer 5 · edited Apr 08 '13 at 08:54

2

$('#foo').on('mouseup', function(e){
    e.preventDefault();
    $(this).select();
});

$('#foo').on('mouseup', function(e){
    e.preventDefault();
    $(this).select();
});

edited Apr 08 '13 at 08:54

Johan

18,814
30
70
88

answered Apr 08 '13 at 08:32

javadev28hu

160
1
5

score 2 · Answer 6 · answered Jul 27 '11 at 16:32

2

Do you mean to select the text?

Use onclick event to fire the code:

document.getElementById("target-input-id").select();

answered Jul 27 '11 at 16:32

Sfisioza

3,830
6
42
57

score 0 · Answer 7 · answered Jan 02 '13 at 03:06

0

This should do it:

<input type='text' name='url' id='url' onclick="this.select()" value='http://www.a-link.com/' />

answered Jan 02 '13 at 03:06

tlaverdure

522
7
18

score -1 · Answer 8 · edited Oct 06 '22 at 23:33

-1

<input id="inputField" type="text" size="40" value="text to be highlighted"></p>
    
document.getElementById('inputField').focus();

The default behavior for focus selects the text in the input field. I was looking for a solution not to do that when I found this.

edited Oct 06 '22 at 23:33

Kick Buttowski

6,709
13
37
58

answered Feb 01 '13 at 18:04

Bruce Lim

745
6
22

Auto-highlight an input field on focus

8 Answers8

Linked