Javascript 自动突出显示焦点上的输入字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6847875/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto-highlight an input field on focus
提问by Jay
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?
我想知道是否有办法让输入框内的文本（使用 value="" 预加载）在用户点击它时突出显示？
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.
我需要他突出显示的文本，以便用户可以复制它。
回答by tskuzzy
<input type="text" name="textbox" value="Test" onclick="this.select()" />
回答by Andrew Kothmann
You could attach javascript to the click event to select the text like so:
您可以将 javascript 附加到单击事件以选择文本，如下所示：
$(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 .clickwith .focusin the example above.
存在一个潜在问题，即用户可能会尝试在文本中稍后点单击以纠正打字错误并最终选择了整个内容。更好的方法是在输入获得用户焦点时触发它。你会在上面的例子中替换.click为.focus。
jQuery event documentation: http://api.jquery.com/category/events/
jQuery 事件文档：http: //api.jquery.com/category/events/
回答by WK_of_Angmar
Add the following onclickattribute to make the entire <input>automatically highlight when the user clicks on it:
添加以下onclick属性，<input>当用户点击它时，使整个自动突出显示：
<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 onfocusattribute. This will also highlight the entire <input>when the user clicks on it, but it allows them to change the highlighted part manually afterwards:
或者，如果您希望用户能够在初始单击后更改选择，请将 onclick 属性更改为一个onfocus属性。<input>当用户点击它时，这也会突出显示整个部分，但它允许他们之后手动更改突出显示的部分：
<input type="text" value="Test2" onfocus="this.select()" />
Hereis an example of both inputs in action.
这是两个输入都起作用的示例。
回答by user194076
You want to use focus property. Like this: http://jsfiddle.net/sCuNs/
您想使用 focus 属性。像这样：http: //jsfiddle.net/sCuNs/
html
html
<p><input type="text" size="40"></p>
css
css
input:focus, textarea:focus{
background-color: green;
}
回答by javadev28hu
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
回答by Sfisioza
Do you mean to select the text?
你的意思是选择文本？
Use onclickevent to fire the code:
使用onclick事件触发代码：
document.getElementById("target-input-id").select();
回答by tlaverdure
This should do it:
这应该这样做：
<input type='text' name='url' id='url' onclick="this.select()" value='http://www.a-link.com/' />
回答by Bruce Lim
document.getElementById('inputField').focus();
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.
焦点的默认行为选择输入字段中的文本。当我发现这个时，我正在寻找一个不这样做的解决方案。
