javascript - 移动浏览器 + 聚焦时删除输入字段值文本突出显示？

Question

我有一个带有一个输入字段的简单表单。我通过 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();

Answer 1

嗯，看起来像在聚焦时选择了整个输入内容。您可以尝试将插入符号放在输入字段的末尾，将此 onfocus 分配给您的输入字段

onfocus="this.value = this.value;"

Answer 2

哦，所以我只需要在 input:focus 选择器上设置用户选择：

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;
}