HTML5中Placeholder屬性有什么用

本文將為大家詳細(xì)介紹“HTML5中Placeholder屬性有什么用”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會(huì)更新不同的知識(shí)點(diǎn)，希望這篇“HTML5中Placeholder屬性有什么用”能夠給你意想不到的收獲，請(qǐng)大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識(shí)吧。

html是什么

html的全稱為超文本標(biāo)記語(yǔ)言，它是一種標(biāo)記語(yǔ)言，包含了一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說(shuō)明文字，圖形、動(dòng)畫(huà)、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。

                                                       Placeholder(占位符) 是 HTML5 新增的一個(gè) HTML 屬性，用來(lái)對(duì)可輸入字段的期望值提供提示信息，目前已經(jīng)得到主流瀏覽器的廣泛支持，使用方式非常簡(jiǎn)單：

<input id="username" name="username" placeholder="請(qǐng)輸入用戶名" type="text">

該屬性適用于 <textarea> 多行文本框和 type 屬性值為 text, password, search, tel, url 或者 email 等的 <input>。

自定義樣式

如果想改變 placeholder 的默認(rèn)呈現(xiàn)樣式，應(yīng)該使用 ::placeholder 偽元素選擇器，不過(guò)當(dāng)前還沒(méi)有瀏覽器支持，因此只能根據(jù)不同瀏覽器的不同實(shí)現(xiàn)方式分別定義：

::-webkit-input-placeholder { /* Chrome/Safari/Opera */
  color: green;}::-moz-placeholder { /* Firefox 19+ */
  color: green;}:-ms-input-placeholder { /* IE 10+ 注意這里只有一個(gè)冒號(hào) */
  color: green;}

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

::-webkit-input-placeholder,::-moz-placeholder {
  color: green;}

不應(yīng)該把針對(duì)不同瀏覽器的選擇器寫(xiě)在一起，這樣寫(xiě)會(huì)因?yàn)闊o(wú)法識(shí)別的選擇器而造成這整個(gè)規(guī)則集被忽略(當(dāng)然，像類似 IE 7 這種具有超強(qiáng)錯(cuò)誤處理能力的瀏覽器除外，不過(guò)這里和 IE 7 沒(méi)什么關(guān)系)。

Firefox 定義方式的改變

如果需要兼容老版本的 Firefox 瀏覽器，還需要添加下面這種只有一個(gè)冒號(hào)的樣式規(guī)則：

:-moz-placeholder { /* Firefox 4 - 18 */
  color: green;}

因?yàn)閺?Firefox 19 開(kāi)始一個(gè)冒號(hào)的偽類定義方式 :-moz-placeholder 被廢棄了，切換為兩個(gè)冒號(hào)的偽元素定義方式。與此同時(shí)，它還添加了一個(gè)默認(rèn)的 opacity: 0.54 不透明度樣式，如果需要，可以覆蓋掉該樣式，否則文字是半透明的：

::-moz-placeholder {
  color: green;
  opacity: 1;}

偽類和偽元素

偽類和偽元素有什么區(qū)別呢？偽類可以理解為給某個(gè)元素添加了一個(gè)類，比如 :first-child 偽類，選擇第一個(gè)子元素：

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

也可以理解為元素當(dāng)前的狀態(tài)，同樣也可以通過(guò)添加一個(gè)真正的 class 來(lái)實(shí)現(xiàn)類似效果：

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

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

而偽元素可以理解為添加了一個(gè)虛擬的元素。比如 p:before 偽元素，可以像下面這個(gè)偽代碼這樣理解：

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

這里 <p> 元素和 p:before 可以理解為是兩個(gè)不同的元素。如果被繞暈了，沒(méi)關(guān)系，畢竟這不是本文的重點(diǎn)，更多偽元素與偽類的信息可以參考 Pseudo-classes - CSS | MDN 和 Pseudo-elements - CSS | MDN

關(guān)于偽類選擇器引發(fā)的問(wèn)題

因?yàn)?IE 瀏覽器使用的是偽類 :-ms-input-placeholder 選擇器來(lái)定義 placeholder 的樣式，實(shí)際上樣式是作用于文本輸入框的，如果另外還有針對(duì)文本輸入框的選擇器特殊性更高的樣式規(guī)則，將會(huì)覆蓋掉該樣式，參考下面代碼：

input:-ms-input-placeholder { /* 0, 0, 1, 1 */
  color: green;}#username { /* 0, 1, 0, 0 */
  color: blue;}

注釋中的數(shù)字用來(lái)表示該選擇器的特殊性。

上面兩個(gè)樣式規(guī)則當(dāng)中使用 ID 選擇器的特殊性更高，所以在 IE 10/11 中測(cè)試會(huì)看到 placeholder 顯示為藍(lán)色，與期望的有點(diǎn)不一樣。同樣使用偽類選擇器的舊版本 Firefox 也會(huì)出現(xiàn)這個(gè)問(wèn)題，因此，在書(shū)寫(xiě)樣式的時(shí)候需要特別注意，實(shí)在搞不定，別忘了還有 !important 規(guī)則可以用。其它使用兩個(gè)冒號(hào)的偽元素選擇器的瀏覽器不會(huì)出現(xiàn)這個(gè)問(wèn)題，例如：

input::-webkit-input-placeholder { /* 0, 0, 0, 2 */
  color: green;}#username { /* 0, 1, 0, 0 */
  color: blue;}

上面兩個(gè)樣式規(guī)則互相之間不會(huì)影響，使用 Chrome 測(cè)試 placeholder 的顏色為綠色。

關(guān)于選擇器的特殊性可以參考拙作CSS選擇器特殊性與重要性。

讓行為保持一致

雖然樣式是可以自定義了，不過(guò)在行為上還有些差異，在 Chrome 和 Firefox 中當(dāng)文本輸入框輸入內(nèi)容時(shí) placeholder 才會(huì)消失，清除內(nèi)容時(shí)又會(huì)顯示出來(lái)；而在 IE 中則是當(dāng)文本輸入框獲取焦點(diǎn)時(shí) placeholder 就消失了，失去焦點(diǎn)同時(shí)沒(méi)有輸入內(nèi)容時(shí)才會(huì)重新顯示。如果希望在 Chrome 和 Firefox 等瀏覽器中實(shí)現(xiàn)獲取焦點(diǎn)就消失的效果，可以借助 :focus 偽類選擇器來(lái)將 placeholder 的文本顏色設(shè)置為透明：

:focus::-webkit-input-placeholder {
  color: transparent;}

當(dāng)文本輸入框獲取焦點(diǎn)時(shí)，placeholder 的顏色被設(shè)置為透明，感官上就好像消失一樣。

JavaScript

獲取或者修改 placeholder 的內(nèi)容直接獲取或者修改對(duì)應(yīng)文本輸入框的 placeholder 屬性的值就行了：

$('input').attr('placeholder', 'Please enter your name');

So easy，媽媽再也不用擔(dān)心我寫(xiě)代碼了。不過(guò)，想要像普通 DOM 元素那樣通過(guò) javaScript 獲取偽元素對(duì)象直接操作估計(jì)很難，目前可以使用 window.getComputedStyle() 方法來(lái)得到其樣式屬性，該方法的第二個(gè)參數(shù)是一個(gè)偽元素：

window.getComputedStyle(document.getElementById('username'),
  '::-moz-placeholder').getPropertyValue('color'); // "rgb(0, 255, 0)"

如果要通過(guò) JavaScript 來(lái)修改 placeholder 偽元素的樣式的話比較好的一種方式是預(yù)先定義好幾種不同的樣式：

.style-1::-moz-placeholder {
  color: green;}.style-2::-moz-placeholder {
  color: red;}

然后通過(guò)切換文本輸入框的 class 屬性來(lái)實(shí)現(xiàn)修改樣式的目的：

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

另外也可以通過(guò)直接添加樣式規(guī)則來(lái)實(shí)現(xiàn)。

Polyfill

對(duì)于不支持該屬性的瀏覽器，會(huì)簡(jiǎn)單地忽略掉。原則上，placeholder 僅僅是用來(lái)對(duì)期望的輸入起個(gè)提示的作用，對(duì)于不支持的瀏覽器在可用性上不受任何影響。如果需要兼容，那么應(yīng)該使用特性檢測(cè)的方式，針對(duì)不支持的瀏覽器使用 Polyfill，對(duì)于支持的瀏覽器來(lái)說(shuō)，原生的當(dāng)然是最好。

判斷瀏覽器是否支持 <input> 元素的 placeholder 屬性，可以引入 Modernizr 庫(kù)來(lái)判斷：

if (!Modernizr.input.placeholder) {
  // 做點(diǎn)什么事}

也可以自己寫(xiě)判斷，簡(jiǎn)單易行的辦法就是生成一個(gè) <input> 元素對(duì)象，并判斷該元素對(duì)象是否具有 placeholder 屬性：

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

同理，對(duì)于 <textarea> 元素也是一樣：

'placeholder' in document.createElement('textarea')

另外，Opera Mini 明明不支持 placeholder 屬性，卻裝成自己很懂的樣子。這時(shí)候可以使用客戶端檢測(cè)技術(shù)來(lái)將之排除掉，Opera Mini 的 window 對(duì)象包含一個(gè) operamini 對(duì)象：

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

結(jié)合起來(lái)就是這樣：

if (!('placeholder' in document.createElement('input'))  || ({}).toString.call(window.operamini) === '[object OperaMini]') {
  // 做點(diǎn)什么事}

在編寫(xiě) Polyfill 的時(shí)候應(yīng)該盡量與原生功能保持一致，我這里選擇向 IE 的方式看齊，即當(dāng)文本輸入框獲取或失去焦點(diǎn)的時(shí)候處理 placeholder 是否顯示，將文本輸入框的 value 值設(shè)置為 placeholder 的值來(lái)模擬顯示 placeholder 的狀態(tài)。再添加上事件處理程序，當(dāng)文本輸入框獲取焦點(diǎn)時(shí)如果 value 的值為 placeholder 則清空文本輸入框；當(dāng)文本輸入框失去焦點(diǎn)時(shí)如果 value 值為空則將 placeholder 的內(nèi)容賦給它，同時(shí)當(dāng) placeholder 顯示的時(shí)候應(yīng)該給文本輸入框添加一個(gè) class="placeholder" 用來(lái)設(shè)置樣式以區(qū)別是顯示的 placeholder 和還是顯示的普通 value：

// 做點(diǎn)什么事$('input[placeholder]').on('focus', function() {
  var $this = $(this);
  if (this.value === $this.attr('placeholder') && $this.hasClass('placeholder')) {
    this.value = '';
    $this.removeClass('placeholder');
  }}).on('blur', function() {
  var $this = $(this);
  if (this.value === '') {
    $this.addClass('placeholder');
    this.value = $this.attr('placeholder');
  }});

這只是一個(gè)簡(jiǎn)單的模擬實(shí)現(xiàn)，實(shí)際上還有很多需要處理的情況。

處理密碼輸入框

如果需要處理 placeholder 的是個(gè)密碼輸入框，它的 value 值會(huì)顯示為圓點(diǎn)之類的字符，呈現(xiàn)幾個(gè)莫名其妙的圓點(diǎn)來(lái)作為 placeholder 提示恐怕不妥，因此需要特殊對(duì)待一下，將密碼輸入框拷貝一份出來(lái)然后修改其 type 屬性為 'text' 來(lái)替代顯示 placeholder，并把原本的密碼輸入框隱藏：

$('input[placeholder]').on('blur', function() {
  var $this = $(this);
  var $replacement;
  if (this.value === '') { // 失去焦點(diǎn)時(shí)值為空則顯示 placeholder
    if (this.type === 'password') {
      $replacement = $this.clone().attr('type', 'text');
      $replacement.data('placeholder-password', $this);

      // 替代顯示的文本輸入框獲取焦點(diǎn)時(shí)將它刪掉，并且重新顯示原來(lái)的密碼輸入框
      $replacement.on('focus', function() {
        $(this).data('placeholder-password').show().focus();
        $(this).remove();
      });
      $this.after($replacement).hide();
      $this = $replacement;
    }
    $this.addClass('placeholder');
    $this[0].value = $this.attr('placeholder');
  }});

對(duì)于 IE 8 來(lái)說(shuō)它不支持修改 input 元素的 type 屬性，使用 jQuery 的 .attr() 方法來(lái)修改的話只會(huì)默默地失敗。此時(shí)，可以新建一個(gè)文本輸入框，然后把密碼輸入框上的屬性賦給這個(gè)新建的文本輸入框：

try {
  $replacement = $this.clone().prop('type', 'text'); // 使用 .prop() 方法在 IE 8 下會(huì)報(bào)錯(cuò)} catch(e) {
  $replacement = $('<input>').attr({
    'type': 'text',
    'class': this.className // 還可以賦予 id, name 等屬性
  });}

需要注意的是 id 和 name 屬性不要重復(fù)了，可以先用一個(gè)變量保存下來(lái)，再用 .removeAttr() 方法來(lái)刪除屬性。

處理表單提交

當(dāng)表單提交的時(shí)候應(yīng)該將那些正在顯示 placeholder 的文本輸入框過(guò)濾掉，畢竟沒(méi)有必要將那些沒(méi)有用的數(shù)據(jù)提交給服務(wù)器，在提交時(shí)候?qū)⒛切┪谋据斎肟虻?value 值設(shè)為空，提交之后再恢復(fù)成顯示 placeholder 的狀態(tài)：

$(document).on('submit', 'form', function() {
  var $input = $('.placeholder', this);
  $input.each(function() {
    this.value = '';
  });
  setTimeout(function() {
    $input.each(function() {
      this.value = $(this).attr('placeholder');
    });
  }, 10);});

離開(kāi)頁(yè)面時(shí)

當(dāng)用戶離開(kāi)頁(yè)面時(shí)也需要清空正在顯示 placeholder 的文本輸入框，防止瀏覽器記住文本輸入框當(dāng)前的值，這里可以給 window 對(duì)象綁定一個(gè) beforeunload 事件來(lái)處理：

$(window).on('beforeunload', function() {
  $('.placeholder').each(function() {
    this.value = '';
  });});

另外還需要考慮的問(wèn)題：

• 使用代碼給一個(gè)文本輸入框賦值時(shí)，應(yīng)該同時(shí)處理 placeholder 的狀態(tài)。

• 使用代碼獲取一個(gè)正在顯示 placeholder 的文本輸入框的值的時(shí)候應(yīng)該得到的是一個(gè)空字符串。

如此多的問(wèn)題也就是說(shuō)無(wú)論 Polyfill 寫(xiě)到如何極致，都很難與原生的功能相提并論，因此推薦的方式使用特性檢測(cè)技術(shù)僅針對(duì)不支持的瀏覽器做 Polyfill，而 Polyfill 的功能應(yīng)盡可能地向原生功能看齊。

總結(jié)

將所有樣式總結(jié)起來(lái)：

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999;}input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #999;
  opacity: 1;}input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999;}.placeholder {
  color: #999;}input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
  color: transparent;}input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
  color: transparent;}

Polyfill 可以直接使用這個(gè) jQuery 插件 mathiasbynens/jquery-placeholder，已經(jīng)相當(dāng)完善了。

如果你能讀到這里，小編希望你對(duì)“HTML5中Placeholder屬性有什么用”這一關(guān)鍵問(wèn)題有了從實(shí)踐層面最深刻的體會(huì)，具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道！