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

时间:2011-07-27 16:26:22

标签: javascript jquery html

我想知道输入框内是否存在文本方式(使用value =“”预先加载),以便在用户点击它时突出显示?

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

修改

我需要突出显示的文字,以便用户可以复制它。

8 个答案:

答案 0 :(得分:69)

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

答案 1 :(得分:16)

您可以将javascript附加到click事件以选择文本,如下所示:

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

有一个潜在的问题,用户可能会尝试在文本中稍后点击以更正输入错误并最终选择整个内容。更好的方法是在输入从用户获得焦点时触发此操作。您可以在上面的示例中将.click替换为.focus

jQuery事件文档: http://api.jquery.com/category/events/

答案 2 :(得分:8)

添加以下onclick属性,以便在用户点击它时自动突出显示整个<input>

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

或者,如果您希望用户能够在初始单击后更改选择,请将onclick属性更改为onfocus属性。当用户点击它时,这也会突出显示整个<input>,但它允许他们之后手动更改突出显示的部分:

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

Here是两个输入实例的示例。

答案 3 :(得分:2)

您想要使用焦点属性。像这样:http://jsfiddle.net/sCuNs/

HTML

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

CSS

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

答案 4 :(得分:2)

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

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

答案 5 :(得分:1)

您的意思是选择文字吗?

使用onclick事件触发代码:

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

答案 6 :(得分:0)

这应该这样做:

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

答案 7 :(得分:0)

的document.getElementById( 'inputField')聚焦();

焦点的默认行为选择输入字段中的文本。当我发现这个时,我正在寻找一个不要那样做的解决方案。