js兼容的placeholder属性详解


Posted in Javascript onAugust 18, 2013

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

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

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

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

js兼容的placeholder属性详解

貌似很好用,但也只能在支持 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

js兼容的placeholder属性详解

——IE9

js兼容的placeholder属性详解

Javascript 相关文章推荐
用Javascript 获取页面元素的位置的代码
Sep 25 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
解析jquery获取父窗口的元素
Jun 26 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
AngularJS中run方法的巧妙运用
Jan 04 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 #Javascript
jquery验证表单中的单选与多选实例
Aug 18 #Javascript
JS+CSS实现一个气泡提示框
Aug 18 #Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 #Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 #Javascript
JS通过相同的name进行表格求和代码
Aug 18 #Javascript
复选框全选与全不选操作实现思路
Aug 18 #Javascript
You might like
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
bcastr2.0 通用的图片浏览器
2006/11/22 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
2009/08/15 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
ReactNative Image组件使用详解
2017/08/07 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
对于Python的框架中一些会话程序的管理
2015/04/20 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
python实现对变位词的判断方法
2020/04/05 Python
如何进行Linux分区优化
2016/09/13 面试题
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
上班看电影检讨书
2014/02/12 职场文书
读书小明星事迹材料
2014/05/03 职场文书
个性车贴标语
2014/06/24 职场文书
2014年四风问题个人对照自查剖析材料
2014/09/15 职场文书
法定代表人授权委托书
2014/09/19 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript