js兼容的placeholder属性详解
发布时间:2024-04-25 13:10:15
作为一个.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
猜你喜欢
- 本文分析了MySQL中create table as 与like的区别。分享给大家供大家参考,具体如下:大家可能使用Navicat Prem
- 今天写这个,要用python去除字符串中的换行符并写入文件,网上查阅,就一句代码replace("\n","&
- Sql中in和not in中有null值的情况1)in的逻辑规则是or not in 的逻辑规则是 and2)判断null 的sql语句为
- import threadingfrom time import sleepdef test_func(id): &n
- 本文实例讲述了python实现搜索指定目录下文件及文件内搜索指定关键词的方法。分享给大家供大家参考。具体实现方法如下:#!/usr/bin/
- 错误信息PS D:\parttime\python\django\guanxiangzhiji> python manage.py m
- 浏览器的开发者在很早的时候就已经意识到, HTTP's 的无状态会对Web开发者带来很大的问题,于是(cookies)应运而生。 c
- 就javascript来说,iframe创建的框架和frameset创建的框架一样。这里有个关系图,做个笔记。图片源自《javascript
- Keras保存为可部署的pb格式加载已训练好的.h5格式的keras模型传入如下定义好的export_savedmodel()方法内即可成功
- 大家好,之前我们使用 WechatPCAPI 做了获取微信好友信息以及查看撤回消息,本文我们再使用 WechatPCAPI 来实现微信自动回
- 1、使用dict()函数,通过其他映射(比如其他字典)或者键,值对的序列建立字典。dict1 = dict(a='a', b
- 这篇文章主要介绍了Python异常继承关系和自定义异常实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价
- Oracle 的正规表达式的实施是以各种 SQL 函数和一个 WHERE 子句操作符的形式出现的。如果您不熟悉正规表达式,那么这篇文章可以让
- 本文实例为大家分享了pygame实现弹球游戏的具体代码,供大家参考,具体内容如下pygame弹球游戏写的很简陋pip install pyg
- 如何引入同级包和模块工程项目结构如下包AnimalShow和Class_test是同级包,AnimalShow是父类,Gound,Sea,S
- 先看实际效果,现在时间2018.4.26使用python脚本按照年月日生成多级目录,创建的目录可以将系统生成的日志文件放入其中,方便查阅,代
- 本文实例讲述了django框架自定义模板标签(template tag)操作。分享给大家供大家参考,具体如下:django 提供了丰富的模板
- 楔子当有多个 IO 密集型的任务要被处理时,我们自然而然会想到多线程。但如果任务非常多,我们不可能每一个任务都启动一个线程去处理,这个时候最
- 一、简介 多线程编程技术可以实现代码并行性,优化处理能力,同时功能的
- 1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。2、1024*768下,网页宽度保持在1002