html5爲input元素新增了一個屬性」placeholder」，提供對輸入字段預期值的提示信息，input爲空且未得到焦點時顯示，得到焦點時消失，很是實用。目前，大部分現代瀏覽器都對placeholder屬性提供了支持，IE10也是支持的。若是須要使IE6~IE9等瀏覽器支持placeholder，只有藉助js了。css
在這些不支持原生placeholder屬性的瀏覽器下，一般使用value值來模擬，若是input爲空且未得到焦點，就把value值設置爲placeholder屬性的值，一旦得到焦點，則將該input的值清空。這種方式在一些狀況下會有問題，好比type=」password」的input的value值是以星號顯示的，沒法直接顯示文字，除非同時更改type類型。再如，會給表單驗證帶來麻煩，若是某input是必填的，那麼提交表單的時候該input的value爲空或者爲placeholder值時都不該該被提交，因此咱們要增長對value爲placeholder的判斷，或許這不是什麼大問題，不過若是項目裏使用了驗證插件，而插件自己又不支持這種方式，仍是會帶來些麻煩的。我在前不久的項目中就遇到了這個問題。如今重寫了placeholder函數，在支持傳統的使用value模擬placeholder方式的同時，提供了一種插入一個覆蓋在input上的span標籤來模擬placeholder的方式，可供必要時選擇。先上demo:html
【點擊這裏查看 「跨瀏覽器的placeholder」 DEMO】html5
下面是js代碼主要部分，所有代碼就不貼出了，能夠查看demo頁面的源碼。稍後放出jquery插件版的。java
主要JS：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
/**
* @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;
}
}
}
}
|
-----------------------------------------------------------------------------------------------node
根據上面的東東， 簡單的一個demo以下：jquery
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>跨瀏覽器placehoder</title> <meta name="author" content="ifrans.cn" /> <meta name="description" content="跨瀏覽器的placehoder原生js版,讓ie也支持placehoder" /> <meta name="keywords" content="跨瀏覽器,placehoder,ie,原生js,表單" /> <script type="text/javascript" src="./placeholder.js" ></script> <style> 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;} </style> </head> <body onload="initPlaceholder('form1')"> <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> </body> </html>
/** * @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; } } } } /** * 初始化， 對全部的input ，textarea應用. 在 body的onload中調用. */ function initPlaceholder(formid, doc) { if (!doc){ doc = document; } var oForm1 = doc.getElementById(formid); var oForm1Inputs = oForm1.getElementsByTagName('input'); for(var i=0;i<oForm1Inputs.length;i++){ placeHolder(oForm1Inputs[i],true); } var oForm1Textarea = oForm1.getElementsByTagName('textarea'); for(var i=0;i<oForm1Textarea.length;i++){ placeHolder(oForm1Textarea[i],true); } }