改进《完美让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 ...
随机推荐
- 使用 Chef 管理 Azure 资源
发布于 2014-07-08 作者 陈 忠岳 Chef 是一款开源的开发运营(DevOps)工具,用以应对 IT 基础设施方面的挑战.微软开放技术有限公司(简称"微软开放技术" ...
- OA系统配置文件
第一章 web.xml配置文件解读 1. web.xml文件解读 lemon OA系统的核心配置文件都放在spring目录下的具有applicationContext的前缀文件.Classpath后有 ...
- rspec学习01
1.安装rspec 2.基本构造 rspec用关键字describe和it,所以我们可以象正常会话一样去表达一个想法. describe方法创建了一个用例组,在describe所在的代码块里,你可以用 ...
- unity3d 随机生成地形之随机山脉
利用Fractal Noise生成地形,再加上山体shader,外加雪shader Noise生成结果 noise 生成主要参考这篇文章,就不再赘述 Value3D: Perlin2D: Fracta ...
- JavaScript onConflict 处理
jQuery.noConflict用于释放jQuery和$两个全局变量. <!DOCTYPE html> <html> <head> <meta http-e ...
- Delegate。。
Delegate类简介------------------------ 命名空间:System程序集:mscorlib(在 mscorlib.dll 中) 委托(Delegate)类是一种数据结构,通 ...
- 基础排序算法之并归排序(Merge Sort)
并归排序是学习分治法 (Merge Sort) 的好例子.而且它相对于选择,插入,冒泡排序来说,算法性能有一定提升.我首先会描述要解决的问题,并给出一个并归排序的例子.之后是算法的思路以及给出伪代码. ...
- [转]C语言单引号和双引号的区别
单引号和双引号在C中的意义完全不同,包围在单引号中的一个字符只是编写整数的另一种方法.这个整数是给定的字符在实现的对照序列中的一个对应的值,即ASCII码值.因此在一个ASCII实现中,‘a’和014 ...
- python 2 处理HTTP 请求的包
httplib httplib: https://docs.python.org/2/library/httplib.html python 的官方文档这样说明: This module define ...
- Google Picasa
本博文的主要内容有 .Google Picasa的下载 .Google Picasa的安装 .Google Picasa的使用 Google 的免费图片管理工具Picasa,数秒钟内就可找到并欣赏计算 ...