完美让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 ...
随机推荐
- Delphi安装/卸载OCX控件的方法
delphi 安装卸载ocx 请参见 如下 http://blog.csdn.net/xt_chaoji/article/details/7027298 打开Delphi,关闭所有项目. 1. ...
- godaddy.com 注册域名 买卖域名
https://www.godaddy.com/domains/searchresults.aspx?ci=83269&checkAvail=1&domainToCheck=ses.x ...
- 折腾iPhone的生活——iOS设备重刷固件
iOS设备升级系统总共有这么几种方法: 1.OTA升级,也就是我们最常碰到的,在设备上,连上Wifi,在设置里面的软件更新就可以直接通过Wifi安装新的系统(已越狱设备不要这样升级) 2.通过iTun ...
- net user命令
net user net user 用户名 net user 用户名 密码 /add net user 用户名 /del net localgroup administrators net local ...
- SRM 389(1-250pt)
题意:按一定方法生成n个分数,求他们的和.n <= 20 解法:暴力.我只是没想到,10000^20用double算也能被接受0 0 tag:brute-force // BEGIN CUT H ...
- GCC的编译和安装 很好的资料
http://blog.csdn.net/yrj/article/details/492404 1.GCC的编译和安装2.预处理 #define 可以支持不定数量的参数. 例子如下: ...
- DevExpress控件 GridControl 单元格编辑 回车
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- JS:九宫格抽奖转盘实例
工作需要,所以做了个抽奖转盘的插件,当然这里只做最简单的演示.可以用于取代一些flash抽奖程序. 机制说明: 1.通过定义lottery-unit来控制节点的个数及索引: 2.通过设置lottery ...
- Android中Style和Theme的使用
Style: Style是View中一些属性的集合,包括height,padding,font color,background等等,Style单独定义在xml文件中,类似与web页面中css的角色, ...
- python-gdb
https://blog.log4d.com/2013/11/python-gdb/ https://wiki.python.org/moin/DebuggingWithGdb