A detailed introduction to the HTML5 Placeholder attribute

Placeholder (A detailed introduction to the HTML5 Placeholder attribute) is a new HTML attribute in HTML5, which is used to provide prompt information for the expected value of the input field. It has been widely supported by mainstream browsers and is very simple to use:

<input id="username" name="username" A detailed introduction to the HTML5 Placeholder attribute="请输入用户名" type="text">

This attribute is applicable to <textarea></textarea> multi-line text box and type attribute value is text, password, search, tel, url or email, etc.<input>.

Custom style

If you want to change the default rendering style of A detailed introduction to the HTML5 Placeholder attribute, you should use the ::A detailed introduction to the HTML5 Placeholder attribute pseudo-element selector, but There is currently no browser support, so it can only be defined separately according to the different implementation methods of different browsers:

::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute { /* Chrome/Safari/Opera */
  color: green;}::-moz-A detailed introduction to the HTML5 Placeholder attribute { /* Firefox 19+ */
  color: green;}:-ms-input-A detailed introduction to the HTML5 Placeholder attribute { /* IE 10+ 注意这里只有一个冒号 */
  color: green;}

Why should the styles be defined separately? If they are combined together like the following:

::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute,::-moz-A detailed introduction to the HTML5 Placeholder attribute {
  color: green;}

You should not write selectors for different browsers together, as this will cause the entire rule set to be ignored due to unrecognized selectors (except of course for browsers with strong error handling capabilities like IE 7) , but this has nothing to do with IE 7).

Changes in Firefox definition methods

If you need to be compatible with older versions of Firefox browsers, you also need to add the following style rule with only one colon:

:-moz-A detailed introduction to the HTML5 Placeholder attribute { /* Firefox 4 - 18 */
  color: green;}

Because from Firefox 19 The pseudo-class definition method that starts with a colon:-moz-A detailed introduction to the HTML5 Placeholder attribute is abandoned and switched to the pseudo-element definition method with two colons. At the same time, it also adds a default opacity: 0.54 opacity style, which can be overridden if necessary, otherwise the text is translucent:

::-moz-A detailed introduction to the HTML5 Placeholder attribute {
  color: green;
  opacity: 1;}

pseudo-class and Pseudo-element

What is the difference between pseudo-class and pseudo-element? Pseudo-class can be understood as adding a class to an element, such as :first-child Pseudo-class, select the first child element:

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

can also be understood as the current state of the element , you can also achieve similar effects by adding a real class:

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

Whether it is a pseudo class or a real class, the style is added directly to the <p></p> element .

The pseudo element can be understood as adding a virtual element. For example, the p:before pseudo element can be understood like the following pseudocode:

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

Here<p></p> element and p:before can be understood as two different elements. If you are confused, it doesn’t matter. After all, this is not the focus of this article. For more information about pseudo-elements and pseudo-classes, please refer to Pseudo-classes - CSS | MDN and Pseudo-elements - CSS | MDN

About pseudo-classes Problems caused by selectors

Because IE browser uses pseudo-class:-ms-input-A detailed introduction to the HTML5 Placeholder attribute selector to define the style of A detailed introduction to the HTML5 Placeholder attribute. In fact, the style is applied to the text input box Yes, if there are other more specific style rules for the selector of the text input box, this style will be overwritten. Refer to the following code:

input:-ms-input-A detailed introduction to the HTML5 Placeholder attribute { /* 0, 0, 1, 1 */
  color: green;}#username { /* 0, 1, 0, 0 */
  color: blue;}

The numbers in the comments are used to represent the selector. specificity.

Among the above two style rules, the use of ID selectors is more specific, so when testing in IE 10/11, you will see that the A detailed introduction to the HTML5 Placeholder attribute is displayed in blue, which is a bit different from what you expected. Older versions of Firefox that also use pseudo-class selectors will also have this problem. Therefore, you need to pay special attention when writing styles. If you are really unsure, don't forget that there are !important rules that can be used. Other browsers that use pseudo-element selectors with two colons will not have this problem, for example:

input::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute { /* 0, 0, 0, 2 */
  color: green;}#username { /* 0, 1, 0, 0 */
  color: blue;}

The above two style rules will not affect each other. Use Chrome to test that the color of the A detailed introduction to the HTML5 Placeholder attribute is green.

Regarding the particularity of selectors, you can refer to my work The Particularity and Importance of CSS Selectors.

Keep the behavior consistent

Although the style can be customized, there are still some differences in behavior. In Chrome and Firefox, the A detailed introduction to the HTML5 Placeholder attribute will disappear only when content is entered in the text input box and cleared. It will be displayed again when the content is entered; in IE, the A detailed introduction to the HTML5 Placeholder attribute disappears when the text input box gains focus, and will redisplay when it loses focus and no content is entered. If you want to achieve the effect of disappearing after getting focus in browsers such as Chrome and Firefox, you can use the :focus pseudo-class selector to set the text color of the A detailed introduction to the HTML5 Placeholder attribute to transparent:

:focus::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute {
  color: transparent;}

When When the text input box gets focus, the color of the A detailed introduction to the HTML5 Placeholder attribute is set to transparent, and it feels like it disappears.

JavaScript

To obtain or modify the content of A detailed introduction to the HTML5 Placeholder attribute, just directly obtain or modify the value of the A detailed introduction to the HTML5 Placeholder attribute attribute of the corresponding text input box:

$('input').attr('A detailed introduction to the HTML5 Placeholder attribute', 'Please enter your name');

So easy , my mother no longer has to worry about me writing code. However, it is estimated that it is difficult to directly operate pseudo-element objects through JavaScript like ordinary DOM elements. Currently, you can use the window.getComputedStyle() method to get its style attributes. The second parameter of this method is A pseudo element:

window.getComputedStyle(document.getElementById('username'),
  '::-moz-A detailed introduction to the HTML5 Placeholder attribute').getPropertyValue('color'); // "rgb(0, 255, 0)"

If you want to modify the style of the A detailed introduction to the HTML5 Placeholder attribute pseudo element through JavaScript, a better way is to predefine several different styles:

.style-1::-moz-A detailed introduction to the HTML5 Placeholder attribute {
  color: green;}.style-2::-moz-A detailed introduction to the HTML5 Placeholder attribute {
  color: red;}

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

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

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

Polyfill

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

判断浏览器是否支持 <input> 元素的 A detailed introduction to the HTML5 Placeholder attribute 属性，可以引入 Modernizr 库来判断：

if (!Modernizr.input.A detailed introduction to the HTML5 Placeholder attribute) {
  // 做点什么事}

也可以自己写判断，简单易行的办法就是生成一个 <input> 元素对象，并判断该元素对象是否具有 A detailed introduction to the HTML5 Placeholder attribute 属性：

'A detailed introduction to the HTML5 Placeholder attribute' in document.createElement('input')

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

'A detailed introduction to the HTML5 Placeholder attribute' in document.createElement('textarea')

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

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

结合起来就是这样：

if (!('A detailed introduction to the HTML5 Placeholder attribute' in document.createElement('input'))  || ({}).toString.call(window.operamini) === '[object OperaMini]') {
  // 做点什么事}

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

// 做点什么事$('input[A detailed introduction to the HTML5 Placeholder attribute]').on('focus', function() {
  var $this = $(this);
  if (this.value === $this.attr('A detailed introduction to the HTML5 Placeholder attribute') && $this.hasClass('A detailed introduction to the HTML5 Placeholder attribute')) {
    this.value = '';
    $this.removeClass('A detailed introduction to the HTML5 Placeholder attribute');
  }}).on('blur', function() {
  var $this = $(this);
  if (this.value === '') {
    $this.addClass('A detailed introduction to the HTML5 Placeholder attribute');
    this.value = $this.attr('A detailed introduction to the HTML5 Placeholder attribute');
  }});

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

处理密码输入框

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

$('input[A detailed introduction to the HTML5 Placeholder attribute]').on('blur', function() {
  var $this = $(this);
  var $replacement;
  if (this.value === '') { // 失去焦点时值为空则显示 A detailed introduction to the HTML5 Placeholder attribute
    if (this.type === 'password') {
      $replacement = $this.clone().attr('type', 'text');
      $replacement.data('A detailed introduction to the HTML5 Placeholder attribute-password', $this);

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

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

处理表单提交

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

$(document).on('submit', 'form', function() {
  var $input = $('.A detailed introduction to the HTML5 Placeholder attribute', this);
  $input.each(function() {
    this.value = '';
  });
  setTimeout(function() {
    $input.each(function() {
      this.value = $(this).attr('A detailed introduction to the HTML5 Placeholder attribute');
    });
  }, 10);});

离开页面时

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

$(window).on('beforeunload', function() {
  $('.A detailed introduction to the HTML5 Placeholder attribute').each(function() {
    this.value = '';
  });});

另外还需要考虑的问题：

• 使用代码给一个文本输入框赋值时，应该同时处理 A detailed introduction to the HTML5 Placeholder attribute 的状态。

• 使用代码获取一个正在显示 A detailed introduction to the HTML5 Placeholder attribute 的文本输入框的值的时候应该得到的是一个空字符串。

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

总结

将所有样式总结起来：

input::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute,
textarea::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute {
  color: #999;}input::-moz-A detailed introduction to the HTML5 Placeholder attribute,
textarea::-moz-A detailed introduction to the HTML5 Placeholder attribute {
  color: #999;
  opacity: 1;}input:-ms-input-A detailed introduction to the HTML5 Placeholder attribute,
textarea:-ms-input-A detailed introduction to the HTML5 Placeholder attribute {
  color: #999;}.A detailed introduction to the HTML5 Placeholder attribute {
  color: #999;}input:focus::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute,
textarea:focus::-webkit-input-A detailed introduction to the HTML5 Placeholder attribute {
  color: transparent;}input:focus::-moz-A detailed introduction to the HTML5 Placeholder attribute,
textarea:focus::-moz-A detailed introduction to the HTML5 Placeholder attribute {
  color: transparent;}

Polyfill 可以直接使用这个 jQuery 插件 mathiasbynens/jquery-A detailed introduction to the HTML5 Placeholder attribute，已经相当完善了。

The above is the detailed content of A detailed introduction to the HTML5 Placeholder attribute. For more information, please follow other related articles on the PHP Chinese website!