js兼容的placeholder属性详解

 更新时间:2013年08月18日 16:49:28   作者:  
这篇文章详细介绍了js兼容的placeholder属性,有需要的朋友可以参考一下

作为一个.net后台开发的程序猿,博客里既然大多都是前端相关的博文。是不是该考虑换方向了,转前端开发得了 ...

小小吐槽一下,近期受该不该跳槽所困惑,我有选择困难症!

继续前端,这次说一下输入框 placeholder 这个属性。

html5 的新属性,就是在输入框没输入值的时候,显示的提示文字(自己的理解),例如:

貌似很好用,但也只能在支持 html 的浏览器版本中显示,而对于不能支持的浏览器版本,让我这种极力追求完美的开发者来说是很不舒服的一件事。

上网找了很多资料,有很多大牛人都已经有了解决方案了,不过或多或少都有些缺陷,这里我做一个整合和修改:

(忘记看了多少别人的代码了,也忘了地址是什么,在此对其他原作者说声抱歉,若有版权问题请联系我! -.-)

这种扩展,在我看来就像是对浏览器界面功能做一次美容,而我始终坚持,自然的才是最美的。所以在支持这种属性的浏览器版本中,我就不多手再去做其他的修改了。

首先判断是否已支持该属性:

复制代码 代码如下:

if (!('placeholder' in document.createElement('input'))) { }

如果不支持,工作来了。

取出所有拥有 placeholder 属性的 input:text / input:password / textarea,取出各自的 placeholder 属性值,然后模仿功能,在每一个标签后加一个 label 标签,用来显示 placeholder 的值,当输入值时,清空显示的字符串,当删除输入值时,显示字符串。

复制代码 代码如下:

var $element = $(this), placeholder = $element.attr('placeholder');

if (placeholder) {
    // 文本框ID
    var elementId = $element.attr('id');
    if (!elementId) {
        var now = new Date();
        elementId = 'lbl_placeholder' + now.getSeconds() + now.getMilliseconds();
        $element.attr('id', elementId);
    }

    // 添加label标签,用于显示placeholder的值
    var $label = $('<label>', {
        html: $element.val() ? '' : placeholder,
        'for': elementId,
        css:
            {
                position: 'absolute',
                cursor: 'text',
                color: '#a9a9a9',
                fontSize: $element.css('fontSize'),
                fontFamily: $element.css('fontFamily')
            }
    }).insertAfter($element);

    // 绑定事件
    var _setPosition = function () {
        $label.css({ marginTop: GetStringNumValue($element.css('marginTop')) + 8 + 'px', marginLeft: '-' + (GetStringNumValue($element.css('width')) - 6) + 'px' });
    }
    var _resetPlaceholder = function () {
        if ($element.val()) { $label.html(null); }
        else {
            _setPosition();
            $label.html(placeholder);
        }
    }
    _setPosition();
    $element.on('focus blur input keyup propertychange resetplaceholder', _resetPlaceholder);

代码很简单,需注意的是:

1、label 的 margin-top / margin-left,因为我们的项目用了 bootstrap 框架,已设定了输入框的内间距为 "padding: 4px 6px;" 所以这里需缩进对应的像素值。

2、GetStringNumValue() 是我们自己定义的方法,使用正则表达式,用于把字符串中的数字提取,例如 "123px" 返回 123。

3、对于 IE 中不支持的版本,propertychange 真是一个好方法,完美的结合了!...

4、扩展方法 resetplaceholder,用于使用 js 改变输入框值时(赋值、清空),对 placeholder 进行值的对应设置。

效果:

——IE8

——IE9

相关文章

  • javascript实现任务栏消息提示的简单实例

    javascript实现任务栏消息提示的简单实例

    下面小编就为大家带来一篇javascript实现任务栏消息提示的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • 浅析JavaScript事件和方法

    浅析JavaScript事件和方法

    本文通过示例向大家简单分析了javascript的事件和方法,文章简洁而不简单,是篇非常不错的基础文章,这里推荐给大家。
    2015-02-02
  • JavaScript NodeTree导航栏(菜单项JSON类型/自制)

    JavaScript NodeTree导航栏(菜单项JSON类型/自制)

    利用闲暇时间自己做了个JavaScript NodeTree,网上有很多类似的效果,本例主要是练练手,巩固下知识,感兴趣的朋友可以了解下,或许对你学习NodeTree导航栏有所帮助,认为好的就分享喽
    2013-02-02
  • JavaScript中不可忽略的Symbol的盘点

    JavaScript中不可忽略的Symbol的盘点

    Symbol类型的出现,为每个属性赋予了独一无二的标识符,无论项目多么复杂,Symbol都能确保属性键的绝对唯一性,下面我们就来看看JavaScript中那些不可忽略的Symbol吧
    2024-12-12
  • JavaScript中遍历对象的property的3种方法介绍

    JavaScript中遍历对象的property的3种方法介绍

    这篇文章主要介绍了JavaScript中遍历对象的property的3种方法介绍,本文先是讲解了3种方法并用一张图片加深理解,然后给出代码实例,需要的朋友可以参考下
    2014-12-12
  • js获取元素的偏移量offset简单方法(必看)

    js获取元素的偏移量offset简单方法(必看)

    下面小编就为大家带来一篇js获取元素的偏移量offset简单方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 微信小程序实现手写签名功能

    微信小程序实现手写签名功能

    微信小程序实现手写签名功能的步骤详解,包括技术选型、实现步骤、优化与拓展以及常见问题解答,感兴趣的朋友跟随小编一起看看吧
    2025-01-01
  • JavaScript实现无阻塞加载的常用方式

    JavaScript实现无阻塞加载的常用方式

    在 JavaScript 中,无阻塞加载(Non-blocking Loading)是优化网页性能的关键技术,通过避免脚本阻塞页面渲染和其他资源的加载,提升用户体验,以下是实现无阻塞加载的常用方法及示例,需要的朋友可以参考下
    2025-03-03
  • JavaScript实现页面跳转的八种方式

    JavaScript实现页面跳转的八种方式

    这篇文章介绍了JavaScript实现页面跳转的八种方式,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • javascript 函数式编程

    javascript 函数式编程

    javascript 函数式编程...
    2007-08-08

最新评论