<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>跨瀏覽器placehoder</title>
<style>
body{ font:12px/1.5 'simsun';}
form{ width:300px; height:260px; margin:20px auto 0;}
h3{ font-weight:bold; margin:10px 0;}
p{ margin-bottom:10px;}
input{ vertical-align:middle; margin-left:10px; height:24px; line-height:24px; width:200px; padding-left:2px; }
textarea{ vertical-align:middle; margin-left:10px; width:200px; height:50px; font:inherit; padding-left:2px;}
.wrap-statistics{ visibility:hidden;}
</style>
</head>
<body>
<form id="form1">
<h3>在不支援placeholder的瀏覽器下，通過插入懸浮的span元素方式模擬</h3>
<p><label for="username1">使用者名稱:</label><input type="text" name="username1" id="username1" placeholder="請輸入使用者名稱" value="" required></p>
<p><label for="password1">密 碼:</label><input type="password" name="password1" id="password1" placeholder="請輸入密碼" value="" required></p>
<p><label for="address1">地 址:</label><input type="text" name="address1" id="address1" placeholder="請輸入地址" value="" required></p>
<p><label for="remarks1">備 注:</label><textarea placeholder="請輸入備註" id="remarks1"></textarea></p>
</form>
<form id="form2">
<h3>通過value方式模擬placeholder</h3>
<p><label for="username2">使用者名稱:</label><input type="text" name="username1" id="username2" placeholder="請輸入使用者名稱" value="" required></p>
<p><label for="address2">地 址:</label><input type="text" name="address1" id="address2" placeholder="請輸入地址" value="" required></p>
<p><label for="remarks2">備 注:</label><textarea placeholder="請輸入備註" id="remarks2"></textarea></p>
</form>
<script>
var oForm1 = document.getElementById('form1');
var oForm1Inputs = oForm1.getElementsByTagName('input');
for(var i=0;i<oForm1Inputs.length;i++){
placeHolder(oForm1Inputs[i],true);
}
var oForm1Textarea = oForm1.getElementsByTagName('textarea')[0];
placeHolder(oForm1Textarea,true);
var oForm2 = document.getElementById('form2');
var oForm2Inputs = oForm2.getElementsByTagName('input');
for(var i=0;i<oForm2Inputs.length;i++){
placeHolder(oForm2Inputs[i]);
}
var oForm2Textarea = oForm2.getElementsByTagName('textarea')[0];
placeHolder(oForm2Textarea);
/**
* @name placeHolder
* @class 跨瀏覽器placeHolder,對於不支援原生placeHolder的瀏覽器，通過value或插入span元素兩種方案模擬
* @param {Object} obj 要應用placeHolder的表單元素物件
* @param {Boolean} span 是否採用懸浮的span元素方式來模擬placeHolder，預設值false,預設使用value方式模擬
*/
function placeHolder(obj, span) {
if (!obj.getAttribute('placeholder')) return;
var imitateMode = span===true?true:false;
var supportPlaceholder = 'placeholder' in document.createElement('input');
if (!supportPlaceholder) {
var defaultValue = obj.getAttribute('placeholder');
if (!imitateMode) {
obj.onfocus = function () {
(obj.value == defaultValue) && (obj.value = '');
obj.style.color = '';
}
obj.onblur = function () {
if (obj.value == defaultValue) {
obj.style.color = '';
} else if (obj.value == '') {
obj.value = defaultValue;
obj.style.color = '#ACA899';
}
}
obj.onblur();
} else {
var placeHolderCont = document.createTextNode(defaultValue);
var oWrapper = document.createElement('span');
oWrapper.style.cssText = 'position:absolute; color:#ACA899; display:inline-block; overflow:hidden;';
oWrapper.className = 'wrap-placeholder';
oWrapper.style.fontFamily = getStyle(obj, 'fontFamily');
oWrapper.style.fontSize = getStyle(obj, 'fontSize');
oWrapper.style.marginLeft = parseInt(getStyle(obj, 'marginLeft')) ? parseInt(getStyle(obj, 'marginLeft')) + 3 + 'px' : 3 + 'px';
oWrapper.style.marginTop = parseInt(getStyle(obj, 'marginTop')) ? getStyle(obj, 'marginTop'): 1 + 'px';
oWrapper.style.paddingLeft = getStyle(obj, 'paddingLeft');
oWrapper.style.width = obj.offsetWidth - parseInt(getStyle(obj, 'marginLeft')) + 'px';
oWrapper.style.height = obj.offsetHeight + 'px';
oWrapper.style.lineHeight = obj.nodeName.toLowerCase()=='textarea'? '':obj.offsetHeight + 'px';
oWrapper.appendChild(placeHolderCont);
obj.parentNode.insertBefore(oWrapper, obj);
oWrapper.onclick = function () {
obj.focus();
}
//繫結input或onpropertychange事件
if (typeof(obj.oninput)=='object') {
obj.addEventListener("input", changeHandler, false);
} else {
obj.onpropertychange = changeHandler;
}
function changeHandler() {
oWrapper.style.display = obj.value != '' ? 'none' : 'inline-block';
}
/**
* @name getStyle
* @class 獲取樣式
* @param {Object} obj 要獲取樣式的物件
* @param {String} styleName 要獲取的樣式名
*/
function getStyle(obj, styleName) {
var oStyle = null;
if (obj.currentStyle)
oStyle = obj.currentStyle[styleName];
else if (window.getComputedStyle)
oStyle = window.getComputedStyle(obj, null)[styleName];
return oStyle;
}
}
}
}
</div>
</body>
</html>
在不支援placeholder的瀏覽器下，通過插入懸浮的span元素方式模擬
通過value方式模擬placeholder