自动突出显示焦点上的输入字段

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.

Answer 1

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

Answer 2

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/

Answer 3

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.

Answer 4

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

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

Answer 5

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;
}

Answer 6

Do you mean to select the text?

Use onclick event to fire the code:

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

Answer 7

这应该这样做：

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

Answer 8

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.