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 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
javascript 触发事件列表 比较不错
Sep 03 Javascript
浅析js封装和作用域
Jul 09 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
Vue数据驱动模拟实现3
Jan 11 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
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实现ODBC数据分页显示一例
2006/10/09 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
js调用flash的效果代码
2008/04/26 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
JS实现div居中示例
2014/04/17 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
Vue实现验证码功能
2019/12/03 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
python读取excel表格生成erlang数据
2017/08/26 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
查看django版本的方法分享
2018/05/14 Python
Python中staticmethod和classmethod的作用与区别
2018/10/11 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
Keras框架中的epoch、bacth、batch size、iteration使用介绍
2020/06/10 Python
HTML5标签小集
2011/08/02 HTML / CSS
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
高中班长自我鉴定
2013/12/20 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
争先创优演讲稿
2014/09/15 职场文书
公司开除员工通知
2015/04/22 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL