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 组件之旅(一)分析和设计
Oct 28 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
Mar 04 Javascript
javascript中直接写php代码的方法
Jul 31 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
js最简单的双向绑定实例讲解
Jan 02 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
JavaScript实现缓动动画
Nov 25 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
12月红领巾广播稿
2014/02/13 职场文书
生物科学专业自荐书
2014/06/20 职场文书
爱情保证书
2015/01/17 职场文书
避暑山庄导游词
2015/02/04 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python