1.定義

placeholder 屬性提供可描述輸入字段預期值的提示信息

該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。

注釋：placeholder 屬性適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password。

2.用法

<input type="password" name="user_search" placeholder="Search W3School" />

3.縮進

::-webkit-input-placeholder { text-indent: 4px; }
:-ms-input-placeholder { text-indent: 4px; } ::-moz-placeholder { text-indent: 4px; opacity: 1!important; }?

input:focus::-webkit-input-placeholder { color: #999; border-color:#999; }

4.低版本兼容

思路：

4.1 判斷瀏覽器是否支持該元素

return 'placeholder' in document.createElement('input');

4.2 遍歷文檔所有帶?placeholder 屬性的 input

$(':input[placeholder]').each(function (index, element) {})

4.3? 判斷是否是 password 類型

return type.toLowerCase() === 'password';

4.4? 針對每個匹配元素綁定事件?focus、blur、keydown...

總結：不同瀏覽器上展現(xiàn)效果不盡相同，模仿達到產(chǎn)品需求即可。

發(fā)現(xiàn)一個好玩的現(xiàn)象：
如果你把自己的表單放在一個白色背景下或者透明背景下，input設置為白色背景色和顏色，你會發(fā)現(xiàn)看起來聚焦不了了...

?

轉載于:https://www.cnblogs.com/justSmile2/p/9519791.html

總結

以上是生活随笔為你收集整理的placeholder的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。