IE下支持文本框和密码框placeholder效果的JQuery插件分享_Javascript教程-查字典教程网
IE下支持文本框和密码框placeholder效果的JQuery插件分享
IE下支持文本框和密码框placeholder效果的JQuery插件分享
发布时间:2016-12-30 来源:查字典编辑
摘要:很久之前写了这个插件,基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框。placeholde...

很久之前写了这个插件,基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框。

placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示显示在文本框中,当文本框获得焦点时,提示文字消失。

下载地址:http://xiazai.jb51.net/201501/other/placeholderfriend.rar

实现代码如下:

复制代码 代码如下:

(function($) {

/**

* 没有开花的树

* 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=(['"])" type=text placeholderfriend")

.replace(/s*(?:value|on[a-z]+|name)(=(['"])?S*1)")

.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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类