让浏览器兼容placeholder

什么是placeholder

placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

placeholder兼容性解决

1$(function () {
2  if (!placeholderSupport()) {
3    // 判断浏览器是否支持 placeholder
4    $('[placeholder]')
5      .focus(function () {
6        var input = $(this)
7        if (input.val() == input.attr('placeholder')) {
8          input.val('')
9          input.removeClass('placeholder')
10        }
11      })
12      .blur(function () {
13        var input = $(this)
14        if (input.val() == '' || input.val() == input.attr('placeholder')) {
15          input.addClass('placeholder')
16          input.val(input.attr('placeholder'))
17        }
18      })
19      .blur()
20  }
21})
22function placeholderSupport() {
23  return 'placeholder' in document.createElement('input')
24}

版权信息

链接/posts/rang-liu-lan-qi-jian-rong-placeholder

日期2017/04/29

协议CC BY-NC-SA 4.0 转载请注明出处

暂无评论，来抢沙发吧。