改进《完美让IE兼容input placeholder属性的jquery实现》的不完美
《完美让IE兼容input placeholder属性的jquery实现》中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同。
例如对以下文本框的解释:
<input id="itxt" class="itext" type="text" title="这是一个文本框" value="点我输入内容" tabindex="1" maxlength="20">
IE7:
<INPUT id=itxt class=itext title=这是一个文本框 tabIndex=1 maxLength=20 value=点我输入内容>
IE8:
<INPUT id=itxt class=itext title=这是一个文本框 tabIndex=1 maxLength=20 value=点我输入内容 type=text>
IE9:
<input id="itxt" class="itext" title="这是一个文本框" tabIndex="1" maxLength="20" value="点我输入内容" type="text">
对于这样不同的解释,我只想说IE去死。不过从IE9开始,似乎IE正在拼命做到不去死了,这多少让我们这些苦逼的Coder们有些欣慰。
而《完美让IE兼容input placeholder属性的jquery实现》的不完美正是因为我们的正则无法验证这些IE的不同所致。
下面给出完美的方案:
/* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:12 */ (function ($) { //判断是否支持placeholder function isPlaceholer() { var input = document.createElement("input"); return "placeholder" in input; } var placeholderfriend = { focus: function (s) { s = $(s).hide().prev().show().focus(); } } //不支持的代码 if (!isPlaceholer()) { $(function () { var form = $(this); var elements = form.find("input[placeholder]"); elements.each(function () { var s = $(this); var pValue = s.attr("placeholder"); var sValue = s.val(); if (pValue) { if (sValue == "") { //DOM不支持type的修改,需要复制密码框属性,生成新的DOM var newinputstr = s.prop('outerHTML') || ""; newinputstr = newinputstr.replace(/type[" "]*=[" "]*password[" "]*/g, " type=\"text\" ") .replace(/type[" "]*=[" "]*[']\s*password[" "]*['][" "]*/g, " type=\"text\" ") .replace(/type[" "]*=[" "]*["\""]password[" "]*["\""]/g, " type=\"text\" "); newinput = $(newinputstr); newinput.attr("value", s.attr("placeholder")).css("color", "#a9a9a9").focus(function() { placeholderfriendfocus(this); }); s.hide(); s.after(newinput); } } }); elements.blur(function () { var s = $(this); var sValue = s.val(); if (sValue == "") { s.hide().next().show(); } }); }); } window.placeholderfriendfocus = placeholderfriend.focus; })(jQuery);
改进《完美让IE兼容input placeholder属性的jquery实现》的不完美的更多相关文章
- 完美让IE兼容input placeholder属性的jquery实现
调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案. /* * 球到西山沟 * http://www.cnzj5u.com * 2014/11/26 12:1 ...
- HTML 5 <input> placeholder 属性
原文链接:http://www.w3school.com.cn/html5/att_input_placeholder.asp HTML 5 <input> placeholder 属性 ...
- 兼容的placeholder属性
作为一个.net后台开发的程序猿,博客里既然大多都是前端相关的博文.是不是该考虑换方向了,转前端开发得了 ... 小小吐槽一下,近期受该不该跳槽所困惑,我有选择困难症! 继续前端,这次说一下输入框 p ...
- input placeholder属性 样式修改(颜色,大小,位置)
placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- HTML 5 <input> placeholder 属性 实现搜索框提示文字点击输入后消失
H5之前要实现这个功能还要用到JS,H5出来之后新增加了placeholder属性,有了这个属性就就能轻松实现这个功能. 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息(h ...
- Html5 input placeholder 属性字体颜色修改。
这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下 Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...
- HTML <input> placeholder 属性
css ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mo ...
- input placeholder属性IE、360浏览器兼容性问题
效果:http://hovertree.com/texiao/jquery/43/ 效果二:http://hovertree.com/texiao/jquery/43/1/ 请在IE中体验. 1.创建 ...
- html5 <input> placeholder 属性
带有 placeholder 文本的搜索字段: <form action="demo_form.asp" method="get"> <inp ...
随机推荐
- Linux Shell编程(30)——别名
Bash别名本质上是一个简称, 缩写, 这可避免键入过长的命令序列. 例如,如果我们添加 alias lm="ls -l | more" 这一行到文件~/.bashrc file里 ...
- Eclipse下安装及配置maven项目管理工具
①eclipse下maven插件安装. 本地maven安装.环境变量配置完成后,打开eclipse,点击eclipse菜单栏Help->Eclipse Marketplace搜索关键字maven ...
- Archipelago - SGU 120(计算几何向量旋转)
题目大意:有一个正N边形,然后给出两个点,求出剩余的点的坐标. 分析:向量旋转可以求出坐标,顺时针旋转时候,x = x'*cos(a) + y'*sin(a), y=-x'*sin(a) + y'*c ...
- CENTOS 7 开放端口设置
CentOS 7 默认没有使用iptables,所以通过编辑iptables的配置文件来开启80端口是不可以的 CentOS 7 采用了 firewalld 防火墙 如要查询是否开启80端口则: [r ...
- Java 8:不要再用循环了
本文由 ImportNew - 进林 翻译自 deadcoderising.欢迎加入翻译小组.转载请见文末要求. 正如我之前所写的,Java 8中的新功能特性改变了游戏规则.对Java开发者来说这是一 ...
- Java8中Lambda表达式的10个例子
Java8中Lambda表达式的10个例子 例1 用Lambda表达式实现Runnable接口 //Before Java 8: new Thread(new Runnable() { @Overri ...
- 深入解析Java中volatile关键字的作用
转(http://m.jb51.net/article/41185.htm)Java语言是支持多线程的,为了解决线程并发的问题,在语言内部引入了 同步块 和 volatile 关键字机制 在java线 ...
- android生成验证码bitmap
不多说了,直接上代码,项目中用到的,未做优化,还有很多参数未设置. [java] view plaincopy 1.import java.util.Random; 2. 3.import andro ...
- javascript实现无缝上下滚动(转)
js实现上下无缝滚动的原理是这样的: 1.首先给容器设定高度或宽度,然后overflow:hidden: 2.容器高度设定后,内容超出则被隐藏.3.改变容器的scrollTop(上下滚动)属性的值,让 ...
- android 27 ListView
效果: 上图中ArrarAdapter是数组的适配器,CursorAdapter是游标适配器,用于操作数据库的数据. ListView是垂直列表,数据源是集合或者数组,这些View都是安卓里的Adap ...