我想知道是否有一种方法,可以使输入框内的文本(使用value=""预加载)在用户单击它时高亮显示?
input type='text' name='url' id='url' value='http://www.a-link.com/' />
编辑
我需要将文本突出显示,以便用户可以复制它。
我想知道是否有一种方法,可以使输入框内的文本(使用value=""预加载)在用户单击它时高亮显示?
input type='text' name='url' id='url' value='http://www.a-link.com/' />
编辑
我需要将文本突出显示,以便用户可以复制它。
<input type="text" name="textbox" value="Test" onclick="this.select()" />
onfocus
而不是 onclick
,那么它将适用于键盘导航和鼠标点击。 this
中访问。例如,对于 React,你可以这样做 <input onFocus={e => e.target.select()} />
。你可以将JavaScript附加到点击事件上,以选择文本,如下所示:
$(document).ready( function() {
$('#id').click( function( event_details ) {
$(this).select();
});
});
存在一个潜在问题,就是用户可能在稍后的文本位置尝试进行点击以更正输入错误,并最终选择整个文本。更好的方式是在用户将焦点放在输入上时触发此事件。在上面的示例中,您需要用.focus
替换.click
。
jQuery事件文档:http://api.jquery.com/category/events/
添加以下 onclick
属性,使用户单击时整个 <input>
自动高亮:
<input type="text" value="Test1" onclick="this.select()" />
如果你希望用户在初次点击后能够更改选择内容,可以将onclick
属性改为onfocus
属性。这样也会在用户点击时突出显示整个<input>
,但允许他们之后手动更改高亮的部分:
<input type="text" value="Test2" onfocus="this.select()" />
这里是两个输入框的示例。
<p><input type="text" size="40"></p>
css
input:focus, textarea:focus{
background-color: green;
}
你是想选择文本吗?
使用onclick
事件来触发代码:
document.getElementById("target-input-id").select();
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
这应该可以:
<input type='text' name='url' id='url' onclick="this.select()" value='http://www.a-link.com/' />
<input id="inputField" type="text" size="40" value="text to be highlighted"></p>
document.getElementById('inputField').focus();
默认情况下,焦点会选择输入框中的文本。当我找到这个解决方案时,我正在寻找一个不这样做的方法。