Une introduction détaillée à l'attribut HTML5 Placeholder

<p>Placeholder (Une introduction détaillée à lattribut HTML5 Placeholder) est un nouvel attribut HTML en HTML5, qui est utilisé pour fournir des informations rapides sur la valeur attendue du champ de saisie. Il a été largement pris en charge par les navigateurs grand public et est très simple à utiliser :

<input id="username" name="username" Une introduction détaillée à lattribut HTML5 Placeholder="请输入用户名" type="text">

<p>Cet attribut est applicable aux <textarea> zones de texte multilignes et type dont la valeur d'attribut est texte, mot de passe, recherche, tel, url ou email, etc. <input>

<p>

Style personnalisé

Si vous souhaitez modifier le style de rendu par défaut de l'espace réservé, vous devez utiliser le sélecteur de pseudo-éléments <p>, mais il existe actuellement aucun support de navigateur , il ne peut donc être défini que séparément selon différentes méthodes d'implémentation de différents navigateurs : ::Une introduction détaillée à lattribut HTML5 Placeholder

::-webkit-input-Une introduction détaillée à lattribut HTML5 Placeholder { /* Chrome/Safari/Opera */
  color: green;}::-moz-Une introduction détaillée à lattribut HTML5 Placeholder { /* Firefox 19+ */
  color: green;}:-ms-input-Une introduction détaillée à lattribut HTML5 Placeholder { /* IE 10+ 注意这里只有一个冒号 */
  color: green;}

Pourquoi les styles devraient-ils être définis séparément s'ils sont combinés comme ceci : <p>

::-webkit-input-Une introduction détaillée à lattribut HTML5 Placeholder,::-moz-Une introduction détaillée à lattribut HTML5 Placeholder {
  color: green;}

ne devrait pas Écrire ensemble des sélecteurs pour différents navigateurs entraînera l'ignorance de l'ensemble des règles en raison de sélecteurs non reconnus (bien sûr, sauf pour les navigateurs dotés de fortes capacités de gestion des erreurs comme IE 7, mais cela n'a rien à voir avec IE 7). <p>

Changements dans la façon dont Firefox est défini

Si vous devez être compatible avec les anciennes versions des navigateurs Firefox, vous devez également ajouter la règle de style suivante avec un seul deux-points : <p>

:-moz-Une introduction détaillée à lattribut HTML5 Placeholder { /* Firefox 4 - 18 */
  color: green;}

Parce qu'à partir de Firefox 19, la méthode de définition de pseudo-classe à un deux-points <p> a été abandonnée et basculée vers la méthode de définition de pseudo-élément à deux deux-points. En même temps, il ajoute également un style d'opacité :-moz-Une introduction détaillée à lattribut HTML5 Placeholder par défaut, qui peut être remplacé si nécessaire, sinon le texte est semi-transparent : opacity: 0.54

::-moz-Une introduction détaillée à lattribut HTML5 Placeholder {
  color: green;
  opacity: 1;}

pseudo-classe et pseudo-élément

Quelle est la différence entre pseudo-classe et pseudo-élément ? La pseudo-classe peut être comprise comme l'ajout d'une classe à un élément, comme <p> pseudo-classe, sélectionnez le premier élément enfant : :first-child

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

peut également être compris comme l'état actuel de l'élément, et peut également être passé Ajouter une vraie classe pour obtenir un effet similaire : <p>

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

Qu'il s'agisse d'une pseudo classe ou d'une vraie classe, les styles sont ajoutés directement à l'élément <p>. <p>

Le pseudo élément peut être compris comme l'ajout d'un élément virtuel. Par exemple, le pseudo-élément <p> peut être compris comme le pseudocode suivant : p:before

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

Ici l'élément <p> et <p> peuvent être compris comme deux éléments différents. Si vous êtes confus, cela n'a pas d'importance. Après tout, ce n'est pas le sujet de cet article. Pour plus d'informations sur les pseudo-éléments et les pseudo-classes, veuillez vous référer aux pseudo-classes - CSS MDN et pseudo-éléments -. CSS | MDNp:before

À propos des pseudo-classes Problèmes causés par les sélecteurs

Parce que le navigateur IE utilise le sélecteur de pseudo-classe <p> pour définir le style de l'espace réservé. appliqué à la zone de saisie de texte. S'il existe une autre zone de saisie de texte, les règles de style avec une spécificité de sélecteur plus élevée remplaceront ce style. Reportez-vous au code suivant : :-ms-input-Une introduction détaillée à lattribut HTML5 Placeholder

input:-ms-input-Une introduction détaillée à lattribut HTML5 Placeholder { /* 0, 0, 1, 1 */
  color: green;}#username { /* 0, 1, 0, 0 */
  color: blue;}

Le numéro dans le commentaire est utilisé pour indiquer le style. spécificité du sélecteur. <p>

Parmi les deux règles de style ci-dessus, l'utilisation du sélecteur d'ID est plus spécifique, donc lors des tests dans IE 10/11, vous verrez que l'espace réservé est affiché en bleu, ce qui est un peu différent de ce à quoi vous vous attendiez . Les anciennes versions de Firefox qui utilisent également des sélecteurs de pseudo-classes auront également ce problème. Par conséquent, vous devez faire particulièrement attention lors de l'écriture de styles, n'oubliez pas qu'il existe des règles <p> qui peuvent être utilisées. . Les autres navigateurs qui utilisent des sélecteurs de pseudo-éléments avec deux deux-points n'auront pas ce problème, par exemple : !important

input::-webkit-input-Une introduction détaillée à lattribut HTML5 Placeholder { /* 0, 0, 0, 2 */
  color: green;}#username { /* 0, 1, 0, 0 */
  color: blue;}

Les deux règles de style ci-dessus ne s'affecteront pas. Utilisez Chrome pour tester la couleur de l'espace réservé. est vert. <p>

Concernant la particularité des sélecteurs, vous pouvez vous référer à mon ouvrage La particularité et l'importance des sélecteurs CSS. <p>

Gardez le comportement cohérent

Bien que le style puisse être personnalisé, il existe encore quelques différences de comportement. Dans Chrome et Firefox, l'espace réservé ne disparaîtra que lorsque le contenu est saisi dans la zone de saisie de texte. et effacé. Il sera à nouveau affiché lorsque le contenu est saisi ; dans IE, l'espace réservé disparaît lorsque la zone de saisie de texte obtient le focus, et s'affichera à nouveau lorsqu'il perd le focus et qu'aucun contenu n'est saisi. Si vous souhaitez obtenir l'effet de disparition après avoir obtenu le focus dans des navigateurs tels que Chrome et Firefox, vous pouvez utiliser le sélecteur de pseudo-classe <p> pour définir la couleur du texte de l'espace réservé sur transparent : :focus

:focus::-webkit-input-Une introduction détaillée à lattribut HTML5 Placeholder {
  color: transparent;}

lorsque la zone de saisie de texte Lorsque le focus est obtenu, la couleur de l'espace réservé est définie sur transparente, le faisant apparaître comme s'il disparaissait. <p>

JavaScript

Pour obtenir ou modifier le contenu de l'espace réservé, il suffit de récupérer ou de modifier la valeur de l'attribut <p> de la zone de saisie de texte correspondante : Une introduction détaillée à lattribut HTML5 Placeholder

$('input').attr('Une introduction détaillée à lattribut HTML5 Placeholder', 'Please enter your name');

C'est si simple, maman. Ne t'inquiète plus pour moi en écrivant du code. Cependant, on estime qu'il est difficile d'exploiter directement l'objet pseudo-élément via JavaScript comme les éléments DOM ordinaires. Actuellement, vous pouvez utiliser la méthode <p> pour obtenir ses attributs de style. element : window.getComputedStyle()

window.getComputedStyle(document.getElementById('username'),
  '::-moz-Une introduction détaillée à lattribut HTML5 Placeholder').getPropertyValue('color'); // "rgb(0, 255, 0)"

Si vous souhaitez modifier le style du pseudo-élément d'espace réservé via JavaScript, une meilleure façon est de prédéfinir plusieurs styles différents : <p>

.style-1::-moz-Une introduction détaillée à lattribut HTML5 Placeholder {
  color: green;}.style-2::-moz-Une introduction détaillée à lattribut HTML5 Placeholder {
  color: red;}

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

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

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

Polyfill

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

<p>判断浏览器是否支持 <input> 元素的 Une introduction détaillée à lattribut HTML5 Placeholder 属性，可以引入 Modernizr 库来判断：

if (!Modernizr.input.Une introduction détaillée à lattribut HTML5 Placeholder) {
  // 做点什么事}

<p>也可以自己写判断，简单易行的办法就是生成一个 <input> 元素对象，并判断该元素对象是否具有 Une introduction détaillée à lattribut HTML5 Placeholder 属性：

'Une introduction détaillée à lattribut HTML5 Placeholder' in document.createElement('input')

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

'Une introduction détaillée à lattribut HTML5 Placeholder' in document.createElement('textarea')

<p>另外，Opera Mini 明明不支持 Une introduction détaillée à lattribut HTML5 Placeholder 属性，却装成自己很懂的样子。这时候可以使用客户端检测技术来将之排除掉，Opera Mini 的 window 对象包含一个 operamini 对象：

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

<p>结合起来就是这样：

if (!('Une introduction détaillée à lattribut HTML5 Placeholder' in document.createElement('input'))  || ({}).toString.call(window.operamini) === '[object OperaMini]') {
  // 做点什么事}

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

// 做点什么事$('input[Une introduction détaillée à lattribut HTML5 Placeholder]').on('focus', function() {
  var $this = $(this);
  if (this.value === $this.attr('Une introduction détaillée à lattribut HTML5 Placeholder') && $this.hasClass('Une introduction détaillée à lattribut HTML5 Placeholder')) {
    this.value = '';
    $this.removeClass('Une introduction détaillée à lattribut HTML5 Placeholder');
  }}).on('blur', function() {
  var $this = $(this);
  if (this.value === '') {
    $this.addClass('Une introduction détaillée à lattribut HTML5 Placeholder');
    this.value = $this.attr('Une introduction détaillée à lattribut HTML5 Placeholder');
  }});

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

处理密码输入框

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

$('input[Une introduction détaillée à lattribut HTML5 Placeholder]').on('blur', function() {
  var $this = $(this);
  var $replacement;
  if (this.value === '') { // 失去焦点时值为空则显示 Une introduction détaillée à lattribut HTML5 Placeholder
    if (this.type === 'password') {
      $replacement = $this.clone().attr('type', 'text');
      $replacement.data('Une introduction détaillée à lattribut HTML5 Placeholder-password', $this);

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

<p>对于 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 等属性
  });}

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

处理表单提交

<p>当表单提交的时候应该将那些正在显示 Une introduction détaillée à lattribut HTML5 Placeholder 的文本输入框过滤掉，毕竟没有必要将那些没有用的数据提交给服务器，在提交时候将那些文本输入框的 value 值设为空，提交之后再恢复成显示 Une introduction détaillée à lattribut HTML5 Placeholder 的状态：

$(document).on('submit', 'form', function() {
  var $input = $('.Une introduction détaillée à lattribut HTML5 Placeholder', this);
  $input.each(function() {
    this.value = '';
  });
  setTimeout(function() {
    $input.each(function() {
      this.value = $(this).attr('Une introduction détaillée à lattribut HTML5 Placeholder');
    });
  }, 10);});

离开页面时

<p>当用户离开页面时也需要清空正在显示 Une introduction détaillée à lattribut HTML5 Placeholder 的文本输入框，防止浏览器记住文本输入框当前的值，这里可以给 window 对象绑定一个 beforeunload 事件来处理：

$(window).on('beforeunload', function() {
  $('.Une introduction détaillée à lattribut HTML5 Placeholder').each(function() {
    this.value = '';
  });});

<p>另外还需要考虑的问题：

• <p>使用代码给一个文本输入框赋值时，应该同时处理 Une introduction détaillée à lattribut HTML5 Placeholder 的状态。

• <p>使用代码获取一个正在显示 Une introduction détaillée à lattribut HTML5 Placeholder 的文本输入框的值的时候应该得到的是一个空字符串。

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

总结

<p>将所有样式总结起来：

input::-webkit-input-Une introduction détaillée à lattribut HTML5 Placeholder,
textarea::-webkit-input-Une introduction détaillée à lattribut HTML5 Placeholder {
  color: #999;}input::-moz-Une introduction détaillée à lattribut HTML5 Placeholder,
textarea::-moz-Une introduction détaillée à lattribut HTML5 Placeholder {
  color: #999;
  opacity: 1;}input:-ms-input-Une introduction détaillée à lattribut HTML5 Placeholder,
textarea:-ms-input-Une introduction détaillée à lattribut HTML5 Placeholder {
  color: #999;}.Une introduction détaillée à lattribut HTML5 Placeholder {
  color: #999;}input:focus::-webkit-input-Une introduction détaillée à lattribut HTML5 Placeholder,
textarea:focus::-webkit-input-Une introduction détaillée à lattribut HTML5 Placeholder {
  color: transparent;}input:focus::-moz-Une introduction détaillée à lattribut HTML5 Placeholder,
textarea:focus::-moz-Une introduction détaillée à lattribut HTML5 Placeholder {
  color: transparent;}

<p>Polyfill 可以直接使用这个 jQuery 插件 mathiasbynens/jquery-Une introduction détaillée à lattribut HTML5 Placeholder，已经相当完善了。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!