JQuery Placeholder - Input提示信息

JQuery Placeholder

Placeholder屬性是HTML5爲Input添加的，在Input上提供一個佔位符，文字形式展現輸入文字預期值的提示信息。

如：

須要使用：placeholdr.js
內容：

/** * @name placeHolder * @class 跨瀏覽器placeHolder,對於不支持原生placeHolder的瀏覽器，經過value或插入span元素兩種方案模擬 * @param {Object} obj 要應用placeHolder的表單元素對象 * @param {Boolean} span 是否採用懸浮的span元素方式來模擬placeHolder，默認值false,默認使用value方式模擬 */
 //執行
jQuery(function(){
    jQuery(':input[placeholder]').each(function(index, element) {
        placeHolder(element,true);
    }); 
});
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');
    var type = obj.getAttribute('type');
    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'))!=0 ? getStyle(obj, 'marginTop'): 0 + 'px';
        oWrapper.style.paddingLeft = getStyle(obj, 'paddingLeft');
        oWrapper.style.width = (obj.offsetWidth - parseInt((getStyle(obj, 'marginLeft')=="auto"?0:(getStyle(obj, 'marginLeft')))))==0?100:(obj.offsetWidth - parseInt((getStyle(obj, 'marginLeft')=="auto"?0:(getStyle(obj, 'marginLeft'))))) + 'px';
        oWrapper.style.height = obj.offsetHeight==0?34:obj.offsetHeight + 'px';
        oWrapper.style.lineHeight = obj.nodeName.toLowerCase()=='textarea'? '':(obj.offsetHeight==0?34:obj.offsetHeight) + 'px';
        oWrapper.appendChild(placeHolderCont);
        obj.parentNode.insertBefore(oWrapper, obj);
        oWrapper.onclick = function () {
            obj.focus();
        };
        //綁定input或onpropertychange事件,ie9中刪除時沒法觸發此事件
        if (typeof(obj.oninput)=='object') {
            obj.addEventListener("input", changeHandler, false);
            obj.onpropertychange = changeHandler;
            obj.onkeyup = delHandler;
        } else {
            obj.onpropertychange = changeHandler;
            obj.onkeyup = delHandler;
        }
        function changeHandler() {
            oWrapper.style.display = obj.value != '' ? 'none' : 'inline-block';
        }
        function delHandler(e){//監聽del、backspace、ctrl+x
            var e = e || window.event;
            if(e.keyCode == 8 || e.keyCode == 46 || (event.ctrlKey&&e.keyCode == 88)){
                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 type="text" name="userName" id="userName" placeholder="用戶名"/>
<input type="password" name="userPassWord" id="userPassWord" placeholder="密碼" />