我有一个带有一个输入字段的简单表单。我通过javascript inputID.focus()将焦点设置在这个字段上。在一些Android设备(和浏览器用户代理)中进行测试时,我注意到在给定焦点时输入值具有蓝色背景颜色。我已经尝试了很多东西,似乎无法消除这种突出显示。有什么建议?以下是我的尝试:
CSS:
input { width: 200px; height: 24px; border: 1px solid #999; border-radius: 5px; font: Verdana, Geneva, sans-serif; color: #666; padding: 2px; font-size: 12pt; margin-bottom: 10px; background-color: #fff !important; }
input[type=text]:focus{ border:1px solid #090; backface-visibility:hidden !important; background-color:#fff !important; -webkit-tap-highlight-color:#fff !important; -webkit-backface-visibility:hidden !important; text-decoration:none; }
input::selection { background-color:#fff; color:#fff; }
input::-moz-selection { background-color:#fff; color:#fff; }
input::-webkit-input-placeholder {background-color:#fff; color:#fff;}
input:-moz-placeholder {background-color:#fff; color:#fff;}
HTML:
<input id="ducks" type="text" value="quack quack quack mr.duckworth" readonly="">
使用Javascript:
var inputBox = document.getElementById('ducks');
inputBox.focus();
答案 0 :(得分:0)
嗯,看起来整个输入内容在聚焦时被选中。 您可以尝试将插入符号放在输入字段的末尾,将此onfocus指定给输入字段
onfocus="this.value = this.value;"
答案 1 :(得分:0)
哦,所以我只需要在输入上设置用户选择:焦点选择器:
<强> CSS:强>
input[type="text"]:focus {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}