聚焦时自动高亮输入框

Question

我想知道是否有一种方法，可以使输入框内的文本（使用value=""预加载）在用户单击它时高亮显示？

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

编辑

我需要将文本突出显示，以便用户可以复制它。

- Jay

---

那么对于输入类型为“number”呢？ - Kieran Ryan

Answer 1

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

- tskuzzy

---

1. 如果你将它绑定到 onfocus 而不是 onclick，那么它将适用于键盘导航和鼠标点击。
2. 你也可以从发出的事件对象中访问输入字段，而不是从 this 中访问。例如，对于 React，你可以这样做 <input onFocus={e => e.target.select()} />。

- Cam Jackson

很棒的答案，包括onfocus建议。我发现了许多其他建议，但它们都需要JavaScript。 - Steve Rehling

Answer 2

你可以将JavaScript附加到点击事件上，以选择文本，如下所示：

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

存在一个潜在问题，就是用户可能在稍后的文本位置尝试进行点击以更正输入错误，并最终选择整个文本。更好的方式是在用户将焦点放在输入上时触发此事件。在上面的示例中，您需要用.focus替换.click。

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

- Andrew Kothmann

---

这类似于最佳答案，但更加低调，这被认为更为恰当。 - Brad Werth

Answer 3

添加以下 onclick 属性，使用户单击时整个 <input> 自动高亮：

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

如果你希望用户在初次点击后能够更改选择内容，可以将onclick属性改为onfocus属性。这样也会在用户点击时突出显示整个<input>，但允许他们之后手动更改高亮的部分：

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

这里是两个输入框的示例。

- WK_of_Angmar

Answer 4

你希望使用焦点属性。像这样：http://jsfiddle.net/sCuNs/ HTML

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

css

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

- user194076

---

谢谢，但我需要将文本突出显示，以便用户可以复制它。 - Jay

Answer 5

你是想选择文本吗？

使用onclick事件来触发代码：

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

- Sfisioza

Answer 6

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

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

- javadev28hu

Answer 7

这应该可以：

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

- tlaverdure

Answer 8

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

默认情况下，焦点会选择输入框中的文本。当我找到这个解决方案时，我正在寻找一个不这样做的方法。

- Bruce Lim