IE下支持文本框和密碼框placeholder效果的JQuery插件分享
很久之前寫了這個(gè)插件,基于jQuery實(shí)現(xiàn)的,主要用于IE下實(shí)現(xiàn)placeholder效果,可同時(shí)支持文本和密碼輸入框。
placeholder是HTML5新增的一個(gè)屬性,當(dāng)input設(shè)置了該屬性后,該值的內(nèi)容將作為灰色提示顯示在文本框中,當(dāng)文本框獲得焦點(diǎn)時(shí),提示文字消失。
下載地址:http://xiazai.jb51.net/201501/other/placeholderfriend.rar
實(shí)現(xiàn)代碼如下:
(function($) {
/**
* 沒(méi)有開花的樹
* 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的修改,需要復(fù)制密碼框?qū)傩?,生成新的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);
使用很簡(jiǎn)單,例子如下:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="placeholderfriend.js" type="text/javascript"></script>
</head>
<body>
<input placeholder="賬號(hào)/手機(jī)號(hào)碼" ><br>
<input placeholder="密碼" type="password" >
</body>
</html>
- js兼容的placeholder屬性詳解
- js模仿html5 placeholder適應(yīng)于不支持的瀏覽器
- javascript 文本框水印/占位符(watermark/placeholder)實(shí)現(xiàn)方法
- 讓低版本瀏覽器支持input的placeholder屬性(js方法)
- 兩種方法基于jQuery實(shí)現(xiàn)IE瀏覽器兼容placeholder效果
- 使用jQuery快速解決input中placeholder值在ie中無(wú)法支持的問(wèn)題
- 基于jQuery的讓非HTML5瀏覽器支持placeholder屬性的代碼
- jQuery實(shí)現(xiàn)的placeholder效果完整實(shí)例
- jQuery實(shí)現(xiàn)的一個(gè)自定義Placeholder屬性插件
- jQuery插件EnPlaceholder實(shí)現(xiàn)輸入框提示文字
- 基于JS實(shí)現(xiàn)html中placeholder屬性提示文字效果示例
相關(guān)文章
jQuery動(dòng)態(tài)生成表格及右鍵菜單功能示例
這篇文章主要介紹了jQuery動(dòng)態(tài)生成表格及右鍵菜單功能,結(jié)合實(shí)例形式分析了jQuery表格的動(dòng)態(tài)操作及鼠標(biāo)事件響應(yīng)相關(guān)技巧,需要的朋友可以參考下2017-01-01jQuery實(shí)現(xiàn)動(dòng)態(tài)顯示select下拉列表數(shù)據(jù)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)顯示select下拉列表數(shù)據(jù)的方法,涉及jQuery針對(duì)json數(shù)據(jù)的讀取、遍歷及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-02-02jQuery 實(shí)時(shí)保存頁(yè)面動(dòng)態(tài)添加的數(shù)據(jù)的示例
本篇文章主要介紹了jQuery 實(shí)時(shí)保存頁(yè)面動(dòng)態(tài)添加的數(shù)據(jù)的示例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08使用ajaxfileupload.js實(shí)現(xiàn)上傳文件功能
這篇文章主要為大家詳細(xì)介紹了使用ajaxfileupload.js實(shí)現(xiàn)上傳文件功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08jQuery改變form表單的action,并進(jìn)行提交的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇jQuery改變form表單的action,并進(jìn)行提交的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05jQuery 源碼分析筆記(5) jQuery.support
接下來(lái)是非常糾結(jié)的一個(gè)話題,也是所有JS庫(kù)必須實(shí)現(xiàn)的一個(gè)功能:瀏覽器兼容性和為開發(fā)者屏蔽這些差異。2011-06-06jQuery Attributes(屬性)的使用(一、屬性篇)
本系列文章主要講述jQuery框架的屬性(Attributes)使用方法,文章分為:屬性篇、類篇、Html代碼篇&文本篇、值篇共4篇文章。2009-12-12用jQuery toggleClass 實(shí)現(xiàn)鼠標(biāo)移上變色
這篇文章主要介紹了用jQuery toggleClass 實(shí)現(xiàn)鼠標(biāo)移上變色,需要的朋友可以參考下2014-05-05