HTML5 Placeholder屬性的詳情介紹

Placeholder(佔位符) 是HTML5 新增的一個HTML 屬性，用來對可輸入字段的期望值提供提示信息，目前已經得到主流瀏覽器的廣泛支持，使用方式非常簡單：

<input id="username" name="username" HTML5 Placeholder屬性的詳情介紹="请输入用户名" type="text">

此屬性適用於<textarea></textarea> 多行文字方塊和type 屬性值為text, password, search, tel, url 或email 等的<input>。

自訂樣式

如果想改變HTML5 Placeholder屬性的詳情介紹 的預設呈現樣式，應該使用::HTML5 Placeholder屬性的詳情介紹 偽元素選擇器，不過目前還沒有瀏覽器支持，因此只能根據不同瀏覽器的不同實現方式分別定義：

::-webkit-input-HTML5 Placeholder屬性的詳情介紹 { /* Chrome/Safari/Opera */
  color: green;}::-moz-HTML5 Placeholder屬性的詳情介紹 { /* Firefox 19+ */
  color: green;}:-ms-input-HTML5 Placeholder屬性的詳情介紹 { /* IE 10+ 注意这里只有一个冒号 */
  color: green;}

為什麼樣式要分別定義呢，如果像下面這樣組合到一起：

::-webkit-input-HTML5 Placeholder屬性的詳情介紹,::-moz-HTML5 Placeholder屬性的詳情介紹 {
  color: green;}

不應該把針對不同瀏覽器的選擇器寫在一起，這樣寫會因為無法識別的選擇器而造成這整個規則集被忽略(當然，像類似IE 7 這種具有超強錯誤處理能力的瀏覽器除外，不過這裡和IE 7 沒什麼關係)。

Firefox 定義方式的改變

如果需要相容舊版的Firefox 瀏覽器，還需要加入下面這個只有一個冒號的樣式規則：

:-moz-HTML5 Placeholder屬性的詳情介紹 { /* Firefox 4 - 18 */
  color: green;}

因為從Firefox 19 開始一個冒號的偽類別定義方式:-moz-HTML5 Placeholder屬性的詳情介紹 被放棄了，切換為兩個冒號的偽元素定義方式。同時，它還添加了一個預設的opacity: 0.54 不透明度樣式，如果需要，可以覆蓋掉該樣式，否則文字是半透明的：

::-moz-HTML5 Placeholder屬性的詳情介紹 {
  color: green;
  opacity: 1;}

偽類和偽元素

偽類別和偽元素有什麼差別呢？偽類可以理解為為某個元素添加了一個類，例如:first-child 偽類，選擇第一個子元素：

p:first-child {
  font-size: 16px;}

也可以理解為元素目前的狀態，同樣也可以透過添加一個真正的class 來實現類似效果：

p.first-child {
  font-size: 16px;}

無論是偽類還是真正的類，樣式都是直接添加到<p></p> 元素上的。

而偽元素可以理解為增加了一個虛擬的元素。例如p:before 偽元素，可以像下面這個偽程式碼這樣理解：

<before>p:before</before><p>paragraph</p>

這裡<p></p> 元素和p:before 可以理解為是兩個不同的元素。如果被繞暈了，沒關係，畢竟這不是本文的重點，更多偽元素與偽類的資訊可以參考Pseudo-classes - CSS | MDN 和Pseudo-elements - CSS | MDN

關於偽類選擇器引發的問題

因為IE 瀏覽器使用的是偽類別:-ms-input-HTML5 Placeholder屬性的詳情介紹 選擇器來定義HTML5 Placeholder屬性的詳情介紹 的樣式，實際上樣式是作用於文字輸入框的，如果另外還有針對文字輸入框的選擇器特殊性更高的樣式規則，將會覆寫該樣式，請參考下面程式碼：

input:-ms-input-HTML5 Placeholder屬性的詳情介紹 { /* 0, 0, 1, 1 */
  color: green;}#username { /* 0, 1, 0, 0 */
  color: blue;}

註解中的數字用來表示該選擇器的特殊性。

上面兩個樣式規則當中使用 ID 選擇器的特殊性更高，所以在 IE 10/11 中測試會看到 HTML5 Placeholder屬性的詳情介紹 顯示為藍色，與期望的有點不一樣。同樣使用偽類選擇器的舊版 Firefox 也會出現這個問題，因此，在書寫樣式的時候需要特別注意，實在搞不定，別忘了還有 !important 規則可以用。其它使用兩個冒號的偽元素選擇器的瀏覽器不會出現這個問題，例如：

input::-webkit-input-HTML5 Placeholder屬性的詳情介紹 { /* 0, 0, 0, 2 */
  color: green;}#username { /* 0, 1, 0, 0 */
  color: blue;}

上面兩個樣式規則互相之間不會影響，使用 Chrome 測試 HTML5 Placeholder屬性的詳情介紹 的顏色為綠色。

關於選擇器的特殊性可以參考拙作CSS選擇器特殊性與重要性。

讓行為保持一致

雖然樣式是可以自訂了，不過在行為上還有些差異，在Chrome 和Firefox 中當文字輸入框輸入內容時HTML5 Placeholder屬性的詳情介紹 才會消失，清除內容時又會顯示出來；而在IE 中則是當文字輸入框獲取焦點時HTML5 Placeholder屬性的詳情介紹 就消失了，失去焦點同時沒有輸入內容時才會重新顯示。如果希望在Chrome 和Firefox 等瀏覽器中實現獲取焦點就消失的效果，可以藉助:focus 偽類選擇器來將HTML5 Placeholder屬性的詳情介紹 的文字顏色設定為透明：

:focus::-webkit-input-HTML5 Placeholder屬性的詳情介紹 {
  color: transparent;}

當當文字輸入框取得焦點時，HTML5 Placeholder屬性的詳情介紹 的顏色設定為透明，感官上就好像消失一樣。

JavaScript

取得或修改HTML5 Placeholder屬性的詳情介紹 的內容直接取得或修改對應文字輸入方塊的HTML5 Placeholder屬性的詳情介紹 屬性的值就行了：

$('input').attr('HTML5 Placeholder屬性的詳情介紹', 'Please enter your name');

So easy ，媽媽再也不用擔心我寫程式了。不過，想要像普通DOM 元素那樣透過javaScript 取得偽元素物件直接操作估計很難，目前可以使用window.getComputedStyle() 方法來得到其樣式屬性，該方法的第二個參數是一個偽元素：

window.getComputedStyle(document.getElementById('username'),
  '::-moz-HTML5 Placeholder屬性的詳情介紹').getPropertyValue('color'); // "rgb(0, 255, 0)"

如果要透過JavaScript 來修改HTML5 Placeholder屬性的詳情介紹 偽元素的樣式的話比較好的一種方式是預先定義好幾種不同的樣式：

.style-1::-moz-HTML5 Placeholder屬性的詳情介紹 {
  color: green;}.style-2::-moz-HTML5 Placeholder屬性的詳情介紹 {
  color: red;}

然后通过切换文本输入框的 class 属性来实现修改样式的目的：

$('input').addClass('style-2').removeClass('style-1');

另外也可以通过直接添加样式规则来实现。

Polyfill

对于不支持该属性的浏览器，会简单地忽略掉。原则上，HTML5 Placeholder屬性的詳情介紹 仅仅是用来对期望的输入起个提示的作用，对于不支持的浏览器在可用性上不受任何影响。如果需要兼容，那么应该使用特性检测的方式，针对不支持的浏览器使用 Polyfill，对于支持的浏览器来说，原生的当然是最好。

判断浏览器是否支持 <input> 元素的 HTML5 Placeholder屬性的詳情介紹 属性，可以引入 Modernizr 库来判断：

if (!Modernizr.input.HTML5 Placeholder屬性的詳情介紹) {
  // 做点什么事}

也可以自己写判断，简单易行的办法就是生成一个 <input> 元素对象，并判断该元素对象是否具有 HTML5 Placeholder屬性的詳情介紹 属性：

'HTML5 Placeholder屬性的詳情介紹' in document.createElement('input')

同理，对于 <textarea></textarea> 元素也是一样：

'HTML5 Placeholder屬性的詳情介紹' in document.createElement('textarea')

另外，Opera Mini 明明不支持 HTML5 Placeholder屬性的詳情介紹 属性，却装成自己很懂的样子。这时候可以使用客户端检测技术来将之排除掉，Opera Mini 的 window 对象包含一个 operamini 对象：

({}).toString.call(window.operamini) === '[object OperaMini]'

结合起来就是这样：

if (!('HTML5 Placeholder屬性的詳情介紹' in document.createElement('input'))  || ({}).toString.call(window.operamini) === '[object OperaMini]') {
  // 做点什么事}

在编写 Polyfill 的时候应该尽量与原生功能保持一致，我这里选择向 IE 的方式看齐，即当文本输入框获取或失去焦点的时候处理 HTML5 Placeholder屬性的詳情介紹 是否显示，将文本输入框的 value 值设置为 HTML5 Placeholder屬性的詳情介紹 的值来模拟显示 HTML5 Placeholder屬性的詳情介紹 的状态。再添加上事件处理程序，当文本输入框获取焦点时如果 value 的值为 HTML5 Placeholder屬性的詳情介紹 则清空文本输入框；当文本输入框失去焦点时如果 value 值为空则将 HTML5 Placeholder屬性的詳情介紹 的内容赋给它，同时当 HTML5 Placeholder屬性的詳情介紹 显示的时候应该给文本输入框添加一个 class="HTML5 Placeholder屬性的詳情介紹" 用来设置样式以区别是显示的 HTML5 Placeholder屬性的詳情介紹 和还是显示的普通 value：

// 做点什么事$('input[HTML5 Placeholder屬性的詳情介紹]').on('focus', function() {
  var $this = $(this);
  if (this.value === $this.attr('HTML5 Placeholder屬性的詳情介紹') && $this.hasClass('HTML5 Placeholder屬性的詳情介紹')) {
    this.value = '';
    $this.removeClass('HTML5 Placeholder屬性的詳情介紹');
  }}).on('blur', function() {
  var $this = $(this);
  if (this.value === '') {
    $this.addClass('HTML5 Placeholder屬性的詳情介紹');
    this.value = $this.attr('HTML5 Placeholder屬性的詳情介紹');
  }});

这只是一个简单的模拟实现，实际上还有很多需要处理的情况。

处理密码输入框

如果需要处理 HTML5 Placeholder屬性的詳情介紹 的是个密码输入框，它的 value 值会显示为圆点之类的字符，呈现几个莫名其妙的圆点来作为 HTML5 Placeholder屬性的詳情介紹 提示恐怕不妥，因此需要特殊对待一下，将密码输入框拷贝一份出来然后修改其 type 属性为 'text' 来替代显示 HTML5 Placeholder屬性的詳情介紹，并把原本的密码输入框隐藏：

$('input[HTML5 Placeholder屬性的詳情介紹]').on('blur', function() {
  var $this = $(this);
  var $replacement;
  if (this.value === '') { // 失去焦点时值为空则显示 HTML5 Placeholder屬性的詳情介紹
    if (this.type === 'password') {
      $replacement = $this.clone().attr('type', 'text');
      $replacement.data('HTML5 Placeholder屬性的詳情介紹-password', $this);

      // 替代显示的文本输入框获取焦点时将它删掉，并且重新显示原来的密码输入框
      $replacement.on('focus', function() {
        $(this).data('HTML5 Placeholder屬性的詳情介紹-password').show().focus();
        $(this).remove();
      });
      $this.after($replacement).hide();
      $this = $replacement;
    }
    $this.addClass('HTML5 Placeholder屬性的詳情介紹');
    $this[0].value = $this.attr('HTML5 Placeholder屬性的詳情介紹');
  }});

对于 IE 8 来说它不支持修改 input 元素的 type 属性，使用 jQuery 的 .attr() 方法来修改的话只会默默地失败。此时，可以新建一个文本输入框，然后把密码输入框上的属性赋给这个新建的文本输入框：

try {
  $replacement = $this.clone().prop('type', 'text'); // 使用 .prop() 方法在 IE 8 下会报错} catch(e) {
  $replacement = $(&#39;<input>&#39;).attr({
    &#39;type&#39;: &#39;text&#39;,
    &#39;class&#39;: this.className // 还可以赋予 id, name 等属性
  });}

需要注意的是 id 和 name 属性不要重复了，可以先用一个变量保存下来，再用 .removeAttr() 方法来删除属性。

处理表单提交

当表单提交的时候应该将那些正在显示 HTML5 Placeholder屬性的詳情介紹 的文本输入框过滤掉，毕竟没有必要将那些没有用的数据提交给服务器，在提交时候将那些文本输入框的 value 值设为空，提交之后再恢复成显示 HTML5 Placeholder屬性的詳情介紹 的状态：

$(document).on('submit', 'form', function() {
  var $input = $('.HTML5 Placeholder屬性的詳情介紹', this);
  $input.each(function() {
    this.value = '';
  });
  setTimeout(function() {
    $input.each(function() {
      this.value = $(this).attr('HTML5 Placeholder屬性的詳情介紹');
    });
  }, 10);});

离开页面时

当用户离开页面时也需要清空正在显示 HTML5 Placeholder屬性的詳情介紹 的文本输入框，防止浏览器记住文本输入框当前的值，这里可以给 window 对象绑定一个 beforeunload 事件来处理：

$(window).on('beforeunload', function() {
  $('.HTML5 Placeholder屬性的詳情介紹').each(function() {
    this.value = '';
  });});

另外还需要考虑的问题：

• 使用代码给一个文本输入框赋值时，应该同时处理 HTML5 Placeholder屬性的詳情介紹 的状态。

• 使用代码获取一个正在显示 HTML5 Placeholder屬性的詳情介紹 的文本输入框的值的时候应该得到的是一个空字符串。

如此多的问题也就是说无论 Polyfill 写到如何极致，都很难与原生的功能相提并论，因此推荐的方式使用特性检测技术仅针对不支持的浏览器做 Polyfill，而 Polyfill 的功能应尽可能地向原生功能看齐。

总结

将所有样式总结起来：

input::-webkit-input-HTML5 Placeholder屬性的詳情介紹,
textarea::-webkit-input-HTML5 Placeholder屬性的詳情介紹 {
  color: #999;}input::-moz-HTML5 Placeholder屬性的詳情介紹,
textarea::-moz-HTML5 Placeholder屬性的詳情介紹 {
  color: #999;
  opacity: 1;}input:-ms-input-HTML5 Placeholder屬性的詳情介紹,
textarea:-ms-input-HTML5 Placeholder屬性的詳情介紹 {
  color: #999;}.HTML5 Placeholder屬性的詳情介紹 {
  color: #999;}input:focus::-webkit-input-HTML5 Placeholder屬性的詳情介紹,
textarea:focus::-webkit-input-HTML5 Placeholder屬性的詳情介紹 {
  color: transparent;}input:focus::-moz-HTML5 Placeholder屬性的詳情介紹,
textarea:focus::-moz-HTML5 Placeholder屬性的詳情介紹 {
  color: transparent;}

Polyfill 可以直接使用这个 jQuery 插件 mathiasbynens/jquery-HTML5 Placeholder屬性的詳情介紹，已经相当完善了。

以上是HTML5 Placeholder屬性的詳情介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！