jQuery_jquery로 구현된 사용자 정의 자리 표시자 속성 플러그인

HTML5 중국어 텍스트 상자의 새로운 속성 자리 표시자는 매우 유용한 속성이지만 IE9 이전의 IE 시리즈에서는 이 속성을 지원하지 않아 누구나 이 속성을 사용할 때 주저하게 됩니다. 비슷한 작은 컨트롤을 많이 작성했지만 다재다능하지는 않습니다. 여기서는 점진적으로 향상된 사용자 정의 자리 표시자 jQuery 플러그인을 공유합니다. 한 가지는 사용이 간단하고 누구나 자신의 필요에 따라 개선할 수 있다는 것입니다. 일반적으로 작성된 jQuery 플러그인은 상대적으로 적습니다. 많은 학생들이 jQuery를 사용한다는 점을 고려하여 여기에서는 jQuery 플러그인 형태로 작성하겠습니다.

구현 아이디어를 간략하게 소개합니다.

1. 성능은 html5의 기본 자리표시자와 최대한 유사합니다
2. 점진적 개선은 자리 표시자를 지원하는 브라우저를 처리하지 않습니다

1. 먼저 몇 가지 도구와 방법:

1.supportProperty(nodeType, property), 브라우저가 특정 컨트롤의 특정 속성을 지원하는지 여부를 가져옵니다
2.getPositionInDoc(target, parent), 문서에서 객체의 위치를 ​​가져옵니다
3.$c, Dom 객체를 빠르게 생성하는 방법

이러한 도구와 방법은 일반적이고 일반적인 방법입니다. 자신만의 방법이나 더 적합한 방법이 있는 경우 직접 교체할 수 있습니다.

2. 본체, CustomPlaceholder 객체. 이 개체는 주로 각 텍스트 상자의 위치, 표시되어야 하는 프롬프트 정보 등의 정보를 유지 관리합니다. 또한 프롬프트 정보를 생성하고 위치를 지정하는 메서드와 해당 이벤트도 포함합니다. 물체.

이벤트는 주로 initEvents 함수에서 처리됩니다. 프롬프트 정보 이벤트 처리에 특히 주의해야 합니다. 프롬프트 정보를 클릭하면 포커스가 텍스트 상자로 다시 이동해야 합니다. 텍스트 상자는 초점 및 흐림 이벤트를 처리해야 합니다.

코드 복사 코드는 다음과 같습니다.

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

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

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

CustomPlacehodler 개체의 두 가지 주요 메서드는 createHintLabel(text, position) 및 position()입니다. createHintLabel은 프롬프트 정보의 DOM 객체를 생성하고 이를 찾아서 이 객체를 반환하는 데 사용됩니다. 위치 메소드는 프롬프트 메시지의 위치를 ​​강제로 변경하는 데 사용됩니다. 주로 페이지 크기가 변경될 때 사용됩니다. 이 두 가지 방법의 기능과 구현은 비교적 간단합니다.

3. 플러그인의 기능 구현 부분. jQuery 플러그인 구현 방법에 대해서는 자세히 설명하지 않겠습니다. 여기에서는 기능을 먼저 확인하고 자리 표시자가 기본적으로 지원되는 경우 직접 반환됩니다.

코드 복사 코드는 다음과 같습니다.

if(supportProperty('input', 'placeholder')){
반품;
}

다음 단계는 선택한 입력 개체를 기반으로 해당 CustomPlaceholder 개체를 생성하고 이를 배열에 저장한 후 각 개체의 프롬프트 정보를 DOM 개체로 가져와 컨테이너에 추가하고 마지막으로 컨테이너를 연결하는 것입니다. 신체 개체.

코드 복사 코드는 다음과 같습니다.

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

document.body.appendChild(box);
}

마지막으로 중요한 사항이 하나 더 있습니다. 창 개체가 크기 조정 이벤트를 트리거하면 모든 customPlacehoder 개체의 위치를 ​​조정해야 합니다.

코드 복사 코드는 다음과 같습니다.

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

});

이 간단한 작은 플러그인이 여기서 완성되었습니다.

플러그인 소스 코드:

(function($){

var eles = {
	div: document.createElement('div'),
	ul: document.createElement('ul'),
	li: document.createElement('li'),
	span: document.createElement('span'),
	p: document.createElement('p'),
	a: document.createElement('a'),
	fragment: document.createDocumentFragment(),
	input: document.createElement('input')
}
	
var supportProperty = function(nodeType, property){
	switch(arguments.length){
		case 0:
			return false;
		case 1:
			var property = nodeType, nodeType = 'div';
			property = property.split('.');
			
			if(property.length == 1){
				return typeof eles[nodeType][property[0]] !== 'undefined';
			}else if(property.length == 2){
				return typeof eles[nodeType][property[0]][property[1]] !== 'undefined';
			}
		case 2:
			property = property.split('.');
			
			if(property.length == 1){
				return typeof eles[nodeType][property[0]] !== 'undefined';
			}else if(property.length == 2){
				return typeof eles[nodeType][property[0]][property[1]] !== 'undefined';
			}
			
			return false;
			
			
		default:
			return false;
	}
};

var getPositionInDoc = function(target, parent) {
	if (!target) {
		return null;
	}
	var left = 0,
		top = 0;
	do {
		left += target.offsetLeft || 0;
		top += target.offsetTop || 0;
		target = target.offsetParent;
		if(parent && target == parent){
			break;
		}
	} while (target);
	return {
		left: left,
		top: top
	};
}

var $c = function(tagName, id, className){
	var ele = null;
	if(!eles[tagName]){
		ele = eles[tagName] = document.createElement(tagName);
	}else{
		ele = eles[tagName].cloneNode(true);
	}
	if(id){
		ele.id = id;
	}
	if(className){
		ele.className = className;
	}
	return ele;
};
	
var CustomPlaceholder = function(box, input, option){
	var self = this;
	var position = getPositionInDoc(input);
	self.input = input;
	
	self.option = {xOffset:0, yOffset:0};
	for(var item in option){
		self.option[item] = option[item];
	}
	self.hint = self.createHintLabel(input.getAttribute('placeholder'), position);
	box.appendChild(self.hint);
	
	self.initEvents = function(){
		$(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';
			}
		});
	};
	
	self.initEvents();
};

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();
		}
		
	});
};

})(jQuery);