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