jQuery實現的一個自定義Placeholder屬性插件

2024-04-25 20:31:32

字體：大中小

來源：轉載

供稿：網友

HTML5中文本框的新屬性placeholder是個非常好用的屬性，但是IE系列直至IE9都不支持這一屬性，這就讓大家在用這一屬性的時候有些猶豫不決。自己曾經寫過很多類似共的小控件，但是都不是很通用，這里分享一個漸進增強的自定義placeholder的jQuery插件。有點是使用簡單，大家也可以根據自己的需要進行改進。平常寫jQuery插件比較少，考慮到用jQuery的同學比較多，這里就用jQuery插件的形式編寫了。

在這里簡單的介紹一下實現思路。

1.表現與html5原生的placeholder盡量類似
2.漸進增強對于支持placeholder的瀏覽器不做處理

一、首先是幾個工具方法：

1.supportProperty(nodeType, property)，獲取瀏覽器是否支持某一控件的某一屬性
2.getPositionInDoc(target, parent)，獲取對象在文檔中的位置
3.$c，一個快速創建Dom對象的方法

這幾個工具方法都是一些比較常見通用的方法，如果你有自己的或者更合適的可以自行替換。

二、主體，CustomPlaceholder對象。這個對象主要是維護每一個文本框的信息，包括其位置，應該顯示的提示信息等等，另外它還包含創建提示信息以及定位等方法以及對象的相應事件。

事件主要是在initEvents函數中進行的處理，這里特別要注意的是對提示信息事件的處理，當提示信息被點擊時焦點應該被重新定位到文本框。而文本框要處理的則是focus和blur事件。

$(self.hint).bind( 'click', function(e){
self.input.focus();
});

$(self.input).bind( 'focus', function(e){
self.hint.style.display = 'none';
});

$(self.input).bind( 'blur', function(e){
if(this.value == ''){
self.hint.style.display = 'inline';
}
});

CustomPlacehodler對象的兩個主要方法是createHintLabel(text, position)和position()。createHintLabel是用于創建提示信息的DOM對象并對其進行定位，并返回這個對象。 position方法用于強制對提示消息進行重新定位。主要用于頁面大小改變的情況。這兩個方法的功能和實現都比較簡單。

三、插件的功能實現部分。jQuery插件實現方式就不多說了。這里首先進行了能力檢測，如果原生支持placeholder則直接返回。

if(supportProperty('input', 'placeholder')){
return;
}

接下來是根據選擇的input對象，生成相應的CustomPlaceholder對象，保存在數組中，并獲取每個對象的提示信息的DOM對象，添加到容器中，最后將容器附加到body對象中。

var customPlaceholders = [];
if(this.length > 0){
var box = $c('div', 'dk_placeholderfixed_box');
for(var i = 0, len = this.length; i < len; i++){
var input = this[i];
customPlaceholders.push(new CustomPlaceholder(box, input, option));
}

document.body.appendChild(box);
}

最后還有一件比較重要的事情，為window對象綁定resize事件，當window對象觸發resize事件時對所有的customPlacehoder對象進行重新定位。

$(window).bind( 'resize', function(e){
for(var i = 0, len = customPlaceholders.length; i < len; i++){
var customPlaceholder = customPlaceholders[i];
customPlaceholder.position();
}

});

這個簡單的小插件到這里就寫完了。

插件源碼：這個簡單的小插件到這里就寫完了。

插件源碼：

(function($){

CustomPlaceholder.prototype = {
createHintLabel: function(text, position){
var hint = $c('label');
hint.style.cusor = 'text';
hint.style.position = 'absolute';
hint.style.left = position.left + this.option.xOffset + 'px';
hint.style.top = position.top + this.option.yOffset + 'px';
hint.innerHTML = text;
hint.style.zIndex = '9999';
return hint;
},
position: function(){
var position = getPositionInDoc(this.input);
this.hint.style.left = position.left + this.option.xOffset + 'px';
this.hint.style.top = position.top + this.option.yOffset + 'px';
}
};

$.fn.placeholder = function(option){
if(supportProperty('input', 'placeholder')){
return;
}
var customPlaceholders = [];
if(this.length > 0){
var box = $c('div', 'dk_placeholderfixed_box');
for(var i = 0, len = this.length; i < len; i++){
var input = this[i];
if($(input).is(':visible')){
customPlaceholders.push(new CustomPlaceholder(box, input, option));
}
}

document.body.appendChild(box);
}

$(window).bind( 'resize', function(e){
for(var i = 0, len = customPlaceholders.length; i < len; i++){
var customPlaceholder = customPlaceholders[i];
customPlaceholder.position();
}

});
};