I would like the value of the input text box to be highlighted when it gains focus, either by clicking it or tabbing to it.
我希望输入文本框的值在它获得焦点时被突出显示,可以单击它,也可以使用选项卡。
<html>
<body>
<script>
function focusTest(el)
{
el.select();
}
</script>
<input type="text" value="one" OnFocus="focusTest(this); return false;" />
<br/>
<input type="text" value="two" OnFocus="focusTest(this); return false;" />
</body>
</html>
When either input field is clicked in Firefox or IE, that field is highlighted. However, this doesn't work in Safari. (NOTE: it works when tabbing between fields.)
当在Firefox或IE中单击输入字段时,该字段将被突出显示。但是,这在Safari中是行不通的。(注意:在字段之间制表时,它是有效的。)
2 个解决方案
#1
7
I noticed Safari is actually selecting the text then removing the selection quickly.
我注意到Safari实际上正在选择文本,然后快速删除选择。
So I tried this quick workaround that works in all browsers:
所以我在所有的浏览器中尝试了这个快速的解决方案:
function focusTest(el)
{
setTimeout (function () {el.select();} , 50 );
}
Edit :
Upon further testing it turns out the OnMouseUp event is clearing the selection so it is enough to add
编辑:在进一步的测试之后,OnMouseUp事件正在清除所选内容,这样就足够添加了
onMouseUp="return false;"
to the input element for things to work as they should.
到输入元素,让事物按照它们应该的方式工作。
#2
0
Not sure about a Safari-specific solution here, but an alternative would be to wrap the input element in a div and set the border properties of it via CSS. Then change border color, etc. when focused and unfocused.
这里不确定某个特定于安全性的解决方案,但另一种方法是将输入元素封装到div中,并通过CSS设置它的边框属性。然后在聚焦和不聚焦时改变边框颜色等。
#1
7
I noticed Safari is actually selecting the text then removing the selection quickly.
我注意到Safari实际上正在选择文本,然后快速删除选择。
So I tried this quick workaround that works in all browsers:
所以我在所有的浏览器中尝试了这个快速的解决方案:
function focusTest(el)
{
setTimeout (function () {el.select();} , 50 );
}
Edit :
Upon further testing it turns out the OnMouseUp event is clearing the selection so it is enough to add
编辑:在进一步的测试之后,OnMouseUp事件正在清除所选内容,这样就足够添加了
onMouseUp="return false;"
to the input element for things to work as they should.
到输入元素,让事物按照它们应该的方式工作。
#2
0
Not sure about a Safari-specific solution here, but an alternative would be to wrap the input element in a div and set the border properties of it via CSS. Then change border color, etc. when focused and unfocused.
这里不确定某个特定于安全性的解决方案,但另一种方法是将输入元素封装到div中,并通过CSS设置它的边框属性。然后在聚焦和不聚焦时改变边框颜色等。