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 相关文章推荐
JQuery从头学起第三讲
Jul 06 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
vue+Element-ui实现分页效果
Nov 15 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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
PHP url 加密解密函数代码
2011/08/26 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PDO::exec讲解
2019/01/28 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[01:52]深扒TI7聊天轮盘语音出处7
2017/05/11 DOTA
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
python中import学习备忘笔记
2017/01/24 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
python中scipy.stats产生随机数实例讲解
2021/02/19 Python
C# .NET面试题
2015/11/28 面试题
毕业自我鉴定
2013/11/05 职场文书
个人简历自我评价
2014/01/06 职场文书
毕业生自荐书
2014/02/03 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
钳工实训报告总结
2014/11/04 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
北京天坛导游词
2015/02/12 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
Python中的pprint模块
2021/11/27 Python
日元符号 ¥
2022/02/17 杂记