html5属性Placeholder(占位符)纯js版兼容 - 话题

skye 2011-06-24 10:05:56 3712次浏览 4条回复 0 0 0

<script>
function compatiblePlaceholder(){
	if (!('placeholder' in document.createElement('input'))) {
		var inputs = document.getElementsByTagName('input');
		if (inputs.length != 0) {
			for(var i=0; i<inputs.length; i++) {
				var target = inputs[i];
				if (target.placeholder != "") {
					target.value = target.placeholder;
					target.onfocus = function(){
						if(this.value == this.placeholder)
							this.value = '';
					};
					target.onblur = function(){
						if(this.value == '')
							this.value = this.placeholder;
					};
				}
			}
		}
	}
}
window.onload = compatiblePlaceholder;
</script>
<body>
<input type="text" placeholder="占位符1"/>
<p>
<input type="text" placeholder="占位符2"/>
<p>
<input type="text" placeholder="占位符3"/>
</body>