Eine detaillierte Einführung in das HTML5-Platzhalterattribut

Platzhalter (Platzhalter) ist ein neues HTML-Attribut in HTML5, das zur Bereitstellung von Eingabeaufforderungsinformationen für den erwarteten Wert des Eingabefelds verwendet wird. Es wird von gängigen Browsern weitgehend unterstützt und ist sehr einfach zu verwenden:

<input id="username" name="username" Eine detaillierte Einführung in das HTML5-Platzhalterattribut="请输入用户名" type="text">

Dieses Attribut gilt für <textarea></textarea> mehrzeilige Textfelder und type deren Attributwert Text, Passwort, Suche, Telefonnummer, URL oder E-Mail usw. ist. <input>

Benutzerdefinierter Stil

Wenn Sie den Standard-Rendering-Stil des Platzhalters ändern möchten, sollten Sie den

Pseudoelement-Selektor verwenden, aber den gibt es Derzeit keine Browserunterstützung, daher kann es nur separat entsprechend den unterschiedlichen Implementierungsmethoden verschiedener Browser definiert werden: ::Eine detaillierte Einführung in das HTML5-Platzhalterattribut

::-webkit-input-Eine detaillierte Einführung in das HTML5-Platzhalterattribut { /* Chrome/Safari/Opera */
  color: green;}::-moz-Eine detaillierte Einführung in das HTML5-Platzhalterattribut { /* Firefox 19+ */
  color: green;}:-ms-input-Eine detaillierte Einführung in das HTML5-Platzhalterattribut { /* IE 10+ 注意这里只有一个冒号 */
  color: green;}

Warum sollten die Stile separat definiert werden, wenn sie wie folgt kombiniert werden: <p></p>

::-webkit-input-Eine detaillierte Einführung in das HTML5-Platzhalterattribut,::-moz-Eine detaillierte Einführung in das HTML5-Platzhalterattribut {
  color: green;}

sollte nicht Das gemeinsame Schreiben von Selektoren für verschiedene Browser führt dazu, dass der gesamte Regelsatz aufgrund nicht erkannter Selektoren ignoriert wird (natürlich mit Ausnahme von Browsern mit starken Fehlerbehandlungsfunktionen wie IE 7, aber das hat nichts damit zu tun IE 7). <p></p>Änderungen in der Definition von Firefox

Wenn Sie mit älteren Versionen von Firefox-Browsern kompatibel sein müssen, müssen Sie außerdem die folgende Stilregel mit nur einem Doppelpunkt hinzufügen: <p></p>

:-moz-Eine detaillierte Einführung in das HTML5-Platzhalterattribut { /* Firefox 4 - 18 */
  color: green;}

Weil ab Firefox 19 die Pseudoklassendefinitionsmethode mit einem Doppelpunkt

aufgegeben und auf die Pseudoelementdefinitionsmethode mit zwei Doppelpunkten umgestellt wurde. Gleichzeitig wird auch ein standardmäßiger :-moz-Eine detaillierte Einführung in das HTML5-Platzhalterattribut-Deckkraftstil hinzugefügt, der bei Bedarf überschrieben werden kann, andernfalls ist der Text halbtransparent: opacity: 0.54

::-moz-Eine detaillierte Einführung in das HTML5-Platzhalterattribut {
  color: green;
  opacity: 1;}

Pseudoklasse und Pseudoelement

Was ist der Unterschied zwischen Pseudoklasse und Pseudoelement? Pseudoklasse kann als Hinzufügen einer Klasse zu einem Element verstanden werden, z. B.

Pseudoklasse, Auswahl des ersten untergeordneten Elements: :first-child

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

kann auch als aktueller Status des Elements verstanden werden. und kann auch übergeben werden Fügen Sie eine echte Klasse hinzu, um einen ähnlichen Effekt zu erzielen: <p></p>

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

Ob es sich um eine Pseudoklasse oder eine echte Klasse handelt, Stile werden direkt dem

-Element hinzugefügt. <p></p>

Das Pseudoelement kann als Hinzufügen eines virtuellen Elements verstanden werden. Beispielsweise kann das

-Pseudoelement wie der folgende Pseudocode verstanden werden: p:before

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

Hier können das

-Element und <p></p> als zwei verschiedene Elemente verstanden werden. Wenn Sie verwirrt sind, spielt das keine Rolle. Weitere Informationen zu Pseudo-Elementen und Pseudo-Klassen finden Sie unter Pseudo-Klassen – MDN und Pseudo-Elemente. CSS |. MDNp:before

Über Pseudoklassen-Probleme, die durch Selektoren verursacht werden

Weil der IE-Browser den Pseudoklassen-

-Selektor verwendet, um den Stil des Platzhalters zu definieren Wenn es ein anderes Texteingabefeld gibt, überschreiben Stilregeln mit höherer Selektorspezifität diesen Stil: :-ms-input-Eine detaillierte Einführung in das HTML5-Platzhalterattribut

input:-ms-input-Eine detaillierte Einführung in das HTML5-Platzhalterattribut { /* 0, 0, 1, 1 */
  color: green;}#username { /* 0, 1, 0, 0 */
  color: blue;}

Die Zahl im Kommentar wird zur Angabe verwendet Spezifität des Selektors. <p></p>Von den beiden oben genannten Stilregeln ist die Verwendung des ID-Selektors spezifischer. Wenn Sie also im IE 10/11 testen, werden Sie feststellen, dass der Platzhalter in Blau angezeigt wird, was etwas anders ist als erwartet . Dieses Problem tritt auch bei älteren Versionen von Firefox auf, die auch Pseudoklassenselektoren verwenden. Wenn Sie sich wirklich nicht sicher sind, vergessen Sie nicht, dass es

-Regeln gibt, die verwendet werden können . Dieses Problem tritt in anderen Browsern nicht auf, die Pseudoelementselektoren mit zwei Doppelpunkten verwenden, zum Beispiel: !important

input::-webkit-input-Eine detaillierte Einführung in das HTML5-Platzhalterattribut { /* 0, 0, 0, 2 */
  color: green;}#username { /* 0, 1, 0, 0 */
  color: blue;}

Die beiden oben genannten Stilregeln wirken sich nicht gegenseitig aus, um zu testen, ob die Farbe des Platzhalter ist grün. <p></p> Bezüglich der Besonderheit von Selektoren können Sie auf meine Arbeit „The Particularity and Importance of CSS Selectors“ verweisen. <p></p>Halten Sie das Verhalten konsistent

Obwohl der Stil angepasst werden kann, gibt es dennoch einige Unterschiede im Verhalten. In Chrome und Firefox verschwindet der Platzhalter nur, wenn Inhalt in das Texteingabefeld eingegeben wird Es wird wieder angezeigt, wenn der Inhalt im IE eingegeben wird. Der Platzhalter verschwindet, wenn das Texteingabefeld den Fokus erhält, und wird wieder angezeigt, wenn es den Fokus verliert und kein Inhalt eingegeben wird. Wenn Sie in Browsern wie Chrome und Firefox den Effekt des Verschwindens nach dem Fokussieren erzielen möchten, können Sie mit dem Pseudoklassenselektor

die Textfarbe des Platzhalters auf transparent setzen: :focus

:focus::-webkit-input-Eine detaillierte Einführung in das HTML5-Platzhalterattribut {
  color: transparent;}

Wenn das Texteingabefeld den Fokus erhält, wird die Farbe des Platzhalters auf transparent gesetzt, wodurch er optisch verschwindet. <p></p>JavaScript

Um den Inhalt des Platzhalters abzurufen oder zu ändern, rufen Sie einfach den Wert des Attributs

des entsprechenden Texteingabefelds ab oder ändern Sie ihn: Eine detaillierte Einführung in das HTML5-Platzhalterattribut

$('input').attr('Eine detaillierte Einführung in das HTML5-Platzhalterattribut', 'Please enter your name');

So einfach, Mama. Keine Sorge mehr, dass ich Code schreibe. Es wird jedoch geschätzt, dass es schwierig ist, das Pseudoelementobjekt wie gewöhnliche DOM-Elemente direkt über JavaScript zu bedienen. Derzeit können Sie die Methode

verwenden, um ihre Stilattribute abzurufen. Element: window.getComputedStyle()

window.getComputedStyle(document.getElementById('username'),
  '::-moz-Eine detaillierte Einführung in das HTML5-Platzhalterattribut').getPropertyValue('color'); // "rgb(0, 255, 0)"

Wenn Sie den Stil des Platzhalter-Pseudoelements über JavaScript ändern möchten, ist es besser, mehrere verschiedene Stile vorab zu definieren:

.style-1::-moz-Eine detaillierte Einführung in das HTML5-Platzhalterattribut {
  color: green;}.style-2::-moz-Eine detaillierte Einführung in das HTML5-Platzhalterattribut {
  color: red;}

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

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

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

Polyfill

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

判断浏览器是否支持 <input> 元素的 Eine detaillierte Einführung in das HTML5-Platzhalterattribut 属性，可以引入 Modernizr 库来判断：

if (!Modernizr.input.Eine detaillierte Einführung in das HTML5-Platzhalterattribut) {
  // 做点什么事}

也可以自己写判断，简单易行的办法就是生成一个 <input> 元素对象，并判断该元素对象是否具有 Eine detaillierte Einführung in das HTML5-Platzhalterattribut 属性：

'Eine detaillierte Einführung in das HTML5-Platzhalterattribut' in document.createElement('input')

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

'Eine detaillierte Einführung in das HTML5-Platzhalterattribut' in document.createElement('textarea')

另外，Opera Mini 明明不支持 Eine detaillierte Einführung in das HTML5-Platzhalterattribut 属性，却装成自己很懂的样子。这时候可以使用客户端检测技术来将之排除掉，Opera Mini 的 window 对象包含一个 operamini 对象：

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

结合起来就是这样：

if (!('Eine detaillierte Einführung in das HTML5-Platzhalterattribut' in document.createElement('input'))  || ({}).toString.call(window.operamini) === '[object OperaMini]') {
  // 做点什么事}

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

// 做点什么事$('input[Eine detaillierte Einführung in das HTML5-Platzhalterattribut]').on('focus', function() {
  var $this = $(this);
  if (this.value === $this.attr('Eine detaillierte Einführung in das HTML5-Platzhalterattribut') && $this.hasClass('Eine detaillierte Einführung in das HTML5-Platzhalterattribut')) {
    this.value = '';
    $this.removeClass('Eine detaillierte Einführung in das HTML5-Platzhalterattribut');
  }}).on('blur', function() {
  var $this = $(this);
  if (this.value === '') {
    $this.addClass('Eine detaillierte Einführung in das HTML5-Platzhalterattribut');
    this.value = $this.attr('Eine detaillierte Einführung in das HTML5-Platzhalterattribut');
  }});

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

处理密码输入框

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

$('input[Eine detaillierte Einführung in das HTML5-Platzhalterattribut]').on('blur', function() {
  var $this = $(this);
  var $replacement;
  if (this.value === '') { // 失去焦点时值为空则显示 Eine detaillierte Einführung in das HTML5-Platzhalterattribut
    if (this.type === 'password') {
      $replacement = $this.clone().attr('type', 'text');
      $replacement.data('Eine detaillierte Einführung in das HTML5-Platzhalterattribut-password', $this);

      // 替代显示的文本输入框获取焦点时将它删掉，并且重新显示原来的密码输入框
      $replacement.on('focus', function() {
        $(this).data('Eine detaillierte Einführung in das HTML5-Platzhalterattribut-password').show().focus();
        $(this).remove();
      });
      $this.after($replacement).hide();
      $this = $replacement;
    }
    $this.addClass('Eine detaillierte Einführung in das HTML5-Platzhalterattribut');
    $this[0].value = $this.attr('Eine detaillierte Einführung in das HTML5-Platzhalterattribut');
  }});

对于 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() 方法来删除属性。

处理表单提交

当表单提交的时候应该将那些正在显示 Eine detaillierte Einführung in das HTML5-Platzhalterattribut 的文本输入框过滤掉，毕竟没有必要将那些没有用的数据提交给服务器，在提交时候将那些文本输入框的 value 值设为空，提交之后再恢复成显示 Eine detaillierte Einführung in das HTML5-Platzhalterattribut 的状态：

$(document).on('submit', 'form', function() {
  var $input = $('.Eine detaillierte Einführung in das HTML5-Platzhalterattribut', this);
  $input.each(function() {
    this.value = '';
  });
  setTimeout(function() {
    $input.each(function() {
      this.value = $(this).attr('Eine detaillierte Einführung in das HTML5-Platzhalterattribut');
    });
  }, 10);});

离开页面时

当用户离开页面时也需要清空正在显示 Eine detaillierte Einführung in das HTML5-Platzhalterattribut 的文本输入框，防止浏览器记住文本输入框当前的值，这里可以给 window 对象绑定一个 beforeunload 事件来处理：

$(window).on('beforeunload', function() {
  $('.Eine detaillierte Einführung in das HTML5-Platzhalterattribut').each(function() {
    this.value = '';
  });});

另外还需要考虑的问题：

• 使用代码给一个文本输入框赋值时，应该同时处理 Eine detaillierte Einführung in das HTML5-Platzhalterattribut 的状态。

• 使用代码获取一个正在显示 Eine detaillierte Einführung in das HTML5-Platzhalterattribut 的文本输入框的值的时候应该得到的是一个空字符串。

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

总结

将所有样式总结起来：

input::-webkit-input-Eine detaillierte Einführung in das HTML5-Platzhalterattribut,
textarea::-webkit-input-Eine detaillierte Einführung in das HTML5-Platzhalterattribut {
  color: #999;}input::-moz-Eine detaillierte Einführung in das HTML5-Platzhalterattribut,
textarea::-moz-Eine detaillierte Einführung in das HTML5-Platzhalterattribut {
  color: #999;
  opacity: 1;}input:-ms-input-Eine detaillierte Einführung in das HTML5-Platzhalterattribut,
textarea:-ms-input-Eine detaillierte Einführung in das HTML5-Platzhalterattribut {
  color: #999;}.Eine detaillierte Einführung in das HTML5-Platzhalterattribut {
  color: #999;}input:focus::-webkit-input-Eine detaillierte Einführung in das HTML5-Platzhalterattribut,
textarea:focus::-webkit-input-Eine detaillierte Einführung in das HTML5-Platzhalterattribut {
  color: transparent;}input:focus::-moz-Eine detaillierte Einführung in das HTML5-Platzhalterattribut,
textarea:focus::-moz-Eine detaillierte Einführung in das HTML5-Platzhalterattribut {
  color: transparent;}

Polyfill 可以直接使用这个 jQuery 插件 mathiasbynens/jquery-Eine detaillierte Einführung in das HTML5-Platzhalterattribut，已经相当完善了。

Das obige ist der detaillierte Inhalt vonEine detaillierte Einführung in das HTML5-Platzhalterattribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!