![](/img/trans.png)
[英]Internet Explorer 10 and 11 remove placeholder text when the input is focused
[英]Mobile browsers + remove input field value text highlighting when focused?
我有一個帶有一個輸入字段的簡單表格。 我通過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();
嗯,看起來整個輸入內容都在聚焦時被選中。 您可以嘗試將插入符號放在輸入字段的末尾,將此onfocus分配給輸入字段
onfocus="this.value = this.value;"
哦,所以我只需要在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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.