完美让IE兼容input placeholder属性的jquery实现
调用时直接引用jquery与下面的js就行了,相对网上的大多数例子来说,这个是比较完美的方案。
/*
* 球到西山沟
* 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 (i) {
var s = $(this);
var pValue = s.attr("placeholder");
var sValue = s.val();
if (pValue) {
if (sValue == "") {
//DOM不支持type的修改,需要复制密码框属性,生成新的DOM
var html = this.outerHTML || "";
html = html
.replace(/\s*type=(['"])?password\1/gi, " type=\"text\" ")
.replace(/\s*value=(['"])?\S*\1?/gi, " value=\"" + pValue + "\" onfocus=\"phfrfocus(this);\" style=\"color:#a9a9a9;\" ");
s.hide();
s.after(html);
}
}
});
elements.blur(function () {
var s = $(this);
var sValue = s.val();
if (sValue == "") {
s.hide().next().show();
}
});
});
}
window.phfrfocus = placeholderfriend.focus;
})(jQuery);
完美让IE兼容input placeholder属性的jquery实现的更多相关文章
- 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美
<完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...
- 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 ...
随机推荐
- NIOS中双CPU系统的构建
首先构建SOPC系统,先分别添加两个CPU,分别命名为CPU1和CPU2,设置如下图,其中CPU1运行VGA的乒乓游戏,CPU2运行音乐,这里为了简单,音乐用LED来表示. 这里CPU1选择是中等容量 ...
- HDOJ/HDU 1250 Hat's Fibonacci(大数~斐波拉契)
Problem Description A Fibonacci sequence is calculated by adding the previous two members the sequen ...
- BZOJ1057 [ZJOI2007]棋盘制作(极大化思想)
1057: [ZJOI2007]棋盘制作 Time Limit: 20 Sec Memory Limit: 162 MB Submit: 1848 Solved: 936 [Submit][Sta ...
- poj 1696 Space Ant 极角排序
#include<cstdio> #include<cstring> #include<cmath> #include<iostream> #inclu ...
- poj 1287 Networking【最小生成树prime】
Networking Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 7321 Accepted: 3977 Descri ...
- thinkphp 获取客户端ip地址方法
/** * 获取客户端IP地址 * @param integer $type 返回类型 0 返回IP地址 1 返回IPV4地址数字 * @param boolean $adv 是否进行高级模式获取(有 ...
- 索引查找(索引查找、分块查找) C语言实现
1.基本概念 索引查找又称分级查找. 索引存储的基本思想是:首先把一个集合或线性表(他们对应为主表)按照一定的函数关系或条件划分成若干个逻辑上的子表,为每个子表分别建立一个索引项,由所有 这些索引项构 ...
- 窗体控件 回车事件 分类: WinForm 2014-11-21 10:45 233人阅读 评论(0) 收藏
说明: (1)设置窗体控件的TabIndex属性,(按回车顺序设置TabIndex的大小) (2)修改窗体的一个属性:KeyPreview=true //protected override void ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(45)-工作流设计-设计步骤
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(45)-工作流设计-设计步骤 系列目录 步骤设计很重要,特别是规则的选择. 我这里分为几个规则 1.按自行 ...
- x264 编码器选项分析 (x264 Codec Strong and Weak Points) 1
文章文件夹: x264 编码器选项分析 (x264 Codec Strong and Weak Points) 1 x264 编码器选项分析 (x264 Codec Strong and Weak P ...