placeholder支持ie
来源:互联网 发布:和讯网股票数据接口 编辑:程序博客网 时间:2024/05/29 18:26
很久之前写了这个插件,基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框。
placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失。
下载地址:http://download.csdn.net/detail/cwqcwk1/5676563(含demo)
实现代码如下:
- (function($) {
- /**
- * 没有开花的树
- * http://blog.csdn.net/mycwq/
- * 2012/11/28 15:12
- */
- var placeholderfriend = {
- focus: function(s) {
- s = $(s).hide().prev().show().focus();
- var idValue = s.attr("id");
- if (idValue) {
- s.attr("id", idValue.replace("placeholderfriend", ""));
- }
- var clsValue = s.attr("class");
- if (clsValue) {
- s.attr("class", clsValue.replace("placeholderfriend", ""));
- }
- }
- }
- //判断是否支持placeholder
- function isPlaceholer() {
- var input = document.createElement('input');
- return "placeholder" in input;
- }
- //不支持的代码
- if (!isPlaceholer()) {
- $(function() {
- var form = $(this);
- //遍历所有文本框,添加placeholder模拟事件
- var elements = form.find("input[type='text'][placeholder]");
- elements.each(function() {
- var s = $(this);
- var pValue = s.attr("placeholder");
- var sValue = s.val();
- if (pValue) {
- if (sValue == '') {
- s.val(pValue);
- }
- }
- });
- elements.focus(function() {
- var s = $(this);
- var pValue = s.attr("placeholder");
- var sValue = s.val();
- if (sValue && pValue) {
- if (sValue == pValue) {
- s.val('');
- }
- }
- });
- elements.blur(function() {
- var s = $(this);
- var pValue = s.attr("placeholder");
- var sValue = s.val();
- if (!sValue) {
- s.val(pValue);
- }
- });
- //遍历所有密码框,添加placeholder模拟事件
- var elementsPass = form.find("input[type='password'][placeholder]");
- elementsPass.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 placeholderfriend")
- .replace(/\s*(?:value|on[a-z]+|name)(=(['"])?\S*\1)?/gi, " ")
- .replace(/\s*placeholderfriend/, " placeholderfriend value='" + pValue
- + "' " + "onfocus='placeholderfriendfocus(this);' ");
- var idValue = s.attr("id");
- if (idValue) {
- s.attr("id", idValue + "placeholderfriend");
- }
- var clsValue = s.attr("class");
- if (clsValue) {
- s.attr("class", clsValue + "placeholderfriend");
- }
- s.hide();
- s.after(html);
- }
- }
- });
- elementsPass.blur(function() {
- var s = $(this);
- var sValue = s.val();
- if (sValue == '') {
- var idValue = s.attr("id");
- if (idValue) {
- s.attr("id", idValue + "placeholderfriend");
- }
- var clsValue = s.attr("class");
- if (clsValue) {
- s.attr("class", clsValue + "placeholderfriend");
- }
- s.hide().next().show();
- }
- });
- });
- }
- window.placeholderfriendfocus = placeholderfriend.focus;
- })(jQuery);
使用很简单,例子如下:
- <html>
- <head>
- <script src="jquery.js" type="text/javascript"></script>
- <script src="placeholderfriend.js" type="text/javascript"></script>
- </head>
- <body>
- <input placeholder="账号/手机号码" ><br>
- <input placeholder="密码" type="password" >
- </body>
- </html>
0 0
- placeholder支持ie
- placeholder支持ie
- 让IE支持placeholder属性
- 让IE支持placeholder属性
- 让IE支持placeholder属性
- 让IE支持placeholder属性~
- 让IE支持placeholder属性
- 通过jQuery在IE中支持placeholder
- IE下实现placeholder效果,支持文本框和密码框
- 让IE支持placeholder属性,兼容IE6,7,8,9
- 兼容其他不支持placeholder的浏览器(超强的让IE下支持placeholder的属性插件)
- placeholder IE失效问题
- 兼容IE的placeholder
- placeholder兼容ie
- placeholder的ie兼容性问题
- placeholder 兼容IE
- placeholder兼容ie
- IE不支持PlaceHolder问题解决
- 关于左值与右值--入门学习
- SVN插件 提交代码遇到Unhandled event loop exception No more handles
- 使用Java实现MP3音乐播放器
- 【《Objective-C基础教程 》笔记ch03】(四)OC中的OOP
- 初学者必读:如何学习VC++和C++及其推荐书目和网站
- placeholder支持ie
- biaolianjie
- unity3d NGUI 基础控件及添加监听事件
- JavaScript更改class和id的方法
- HDU 1556 Color the Ball 线段树 题解
- Java LinkTag 获得网页中的所有链接
- AIX 启动执行
- POJ 3083 - Children of the Candy Corn
- 类的sort排序用法