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

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

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

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

貌似很好用,但也只能在支持 html 的浏览器版本中显示,而对于不能支持的浏览器版本,让我这种极力追求完美的开发者来说是很不舒服的一件事。

上网找了很多资料,有很多大牛人都已经有了解决方案了,不过或多或少都有些缺陷,这里我做一个整合和修改:

(忘记看了多少别人的代码了,也忘了地址是什么,在此对其他原作者说声抱歉,若有版权问题请联系我! -.-)

这种扩展,在我看来就像是对浏览器界面功能做一次美容,而我始终坚持,自然的才是最美的。所以在支持这种属性的浏览器版本中,我就不多手再去做其他的修改了。

首先判断是否已支持该属性:

  1. if (!('placeholder' in document.createElement('input'))) { }

如果不支持,工作来了。

取出所有拥有 placeholder 属性的 input:text / input:password / textarea,取出各自的 placeholder 属性值,然后模仿功能,在每一个标签后加一个 label 标签,用来显示 placeholder 的值,当输入值时,清空显示的字符串,当删除输入值时,显示字符串。

  1. var $element = $(this), placeholder = $element.attr('placeholder');
  2.  
  3. if (placeholder) {
  4. // 文本框ID
  5. var elementId = $element.attr('id');
  6. if (!elementId) {
  7. var now = new Date();
  8. elementId = 'lbl_placeholder' + now.getSeconds() + now.getMilliseconds();
  9. $element.attr('id', elementId);
  10. }
  11.  
  12. // 添加label标签,用于显示placeholder的值
  13. var $label = $('<label>', {
  14. html: $element.val() ? '' : placeholder,
  15. 'for': elementId,
  16. css:
  17. {
  18. position: 'absolute',
  19. cursor: 'text',
  20. color: '#a9a9a9',
  21. fontSize: $element.css('fontSize'),
  22. fontFamily: $element.css('fontFamily')
  23. }
  24. }).insertAfter($element);
  25.  
  26. // 绑定事件
  27. var _setPosition = function () {
  28. $label.css({ marginTop: GetStringNumValue($element.css('marginTop')) + 8 + 'px', marginLeft: '-' + (GetStringNumValue($element.css('width')) - 6) + 'px' });
  29. }
  30. var _resetPlaceholder = function () {
  31. if ($element.val()) { $label.html(null); }
  32. else {
  33. _setPosition();
  34. $label.html(placeholder);
  35. }
  36. }
  37. _setPosition();
  38. $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

兼容的placeholder属性的更多相关文章

  1. 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美

    <完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...

  2. 完美让IE兼容input placeholder属性的jquery实现

    调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案. /* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:1 ...

  3. IE如何兼容placeholder属性

    在前端开发中,经常需要为input设置placeholder属性,但是placeholder是HTML5新属性,在IE10以下不兼容,那么如何完美兼容呢? 网上搜索了一下,其实也挺简单的,可以采用以下 ...

  4. input 的 placeholder属性在IE8下的兼容处理

    placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...

  5. HTML5表单提示placeholder属性兼容IE

    placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...

  6. 【工作笔记五】html5的placeholder属性(IE如何兼容placeholder属性)

    placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...

  7. placeholder属性兼容ie8

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. 兼容ie10以下版本的placeholder属性

    <script src="${ctx }/js/jquery.placeholder.js" type="text/javascript">< ...

  9. Html5的placeholder属性(IE兼容)

    HTML5对Web Form做了很多增强,比方input新增的type类型.Form Validation等. Placeholder是HTML5新增的还有一个属性,当input或者textarea设 ...

随机推荐

  1. linux ptheard 生产者消费者

    ;     {           {          printf(         pthread_mutex_lock(&mutex);            != g_iBufSiz ...

  2. 文件操作 系统备份和还原,压缩,解压 tar dump/restore

    基本操作命令: ls -a 显示指定目录下的目录和文件,包括隐藏的文件和目录 ls -l 将文件和目录详细列出来,包括文件状态,权限,拥有者,文件名,文件大小等 改变工作目录命令 cd cd .. 进 ...

  3. DevExpress控件-- Gridcontrol合并表头

    写在前面的话: 在园子里逛了有一段时间了,一直想写点东西,但苦于自己的水平有限,生怕写出来的东西浪费了读者的时间.楼主有幸参加了公司DevExpress控件的培训,独乐乐不如众乐乐,特附上Demo以飨 ...

  4. css3怎么隐藏dom:4种方法

    1.display:none; 2.position:absolute; left:-99999px; 3.visibility:hidden; 4.opacity:0;

  5. linux mysql字符编码问题

    发布:thatboy   来源:脚本学堂     [大 中 小] 本文介绍下,linux环境中mysql字符编码问题的解决办法,有遇到mysql编码问题的朋友,可以参考下本文的介绍,希望对你有一定的帮 ...

  6. PHP — php精粹-编写高效的php代码 --- API

    1.数据格式 (1)json 示例代码: $jsonData = '[{"title":"The Magic Flute","time":1 ...

  7. MyEclipse配置多个WEB容器

    MyEclipse支持多个同版本WEB容器同时运行 打开 然后按下图操作 咱们就得到了 下面需要配置新增加WEB容器的启动路径,在新增加的WEB容器上点击右键,选择箭头指向的菜单 打开的窗口如图,可以 ...

  8. 解决CAS单点登录出现PKIX path building failed的问题

    在一次调试中,出现了这个错误: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderExceptio ...

  9. 生意经:研究一下国外SAAS的产品线,比如Salesforce、Netsuite和Zendesk等等(Salesforce斥资7.5亿美元收购云计算字处理应用Quip)

    看他们做什么,我就做什么-甚至比他们做的更好. ------------------------------------------------------------ 新浪科技讯 北京时间8月3日下 ...

  10. [Mac]使用xcode命令行编译protobuf

    因为不想每次测试与画面显示无关的小功能时把cocos2dx包含进去,所以改用xcode的command line tool直接建立c++项目. 方法: 1.点击file-new-project,选择o ...