关于input提示文字的几种实现方式

<!-- 法一 利用h5标签 但ie10以下不兼容-->
<input type="text" name="" placeholder="请输入提示文字">
<!-- 法二 利用默认value 关于input 密码框提示文字须如下-->
<input type="text" name="" value="请输入提示文字" οnfοcus="if(this.value==defaultValue){this.value='';}" οnblur="if(!value){value=defaultValue}">
<!-- 此方式ie8以下不兼容 -->
<input type="text" value="请输入密码!" οnfοcus="if(this.value==defaultValue) {this.value='';this.type='password'}" οnblur="if(!value) {value=defaultValue; this.type='text';}" style="color:#CCC;" />

<!-- 法三 引入jq的placeholder.js 插件 兼容ie 但密码输入文字提示无效-->
<input type="text" name="" id="txt3">
<script type="text/javascript">
	$(function(){
		$('#txt3').placeholder({word:'请输入提示文字'})
	})
</script>
<script type="text/javascript">
/*placeholder.js*/
~function(){
	/**
 * PlaceHolder组件
 * $(input).placeholder({
 *   word:     // @string 提示文本
 *   color:    // @string 文本颜色
 *   evtType:  // @string focus|keydown 触发placeholder的事件类型
 * })
 *
 * NOTE：
 *   evtType默认是focus，即鼠标点击到输入域时默认文本消失，keydown则模拟HTML5 placeholder属性在Firefox/Chrome里的特征，光标定位到输入域后键盘输入时默认文本才消失。
 *   此外，对于HTML5 placeholder属性，IE10+和Firefox/Chrome/Safari的表现形式也不一致，因此内部实现不采用原生placeholder属性
 */
$.fn.placeholder = function(option, callback) {
    var settings = $.extend({
        word: '',
        color: '#ccc',
        evtType: 'focus'
    }, option)
 
    function bootstrap($that) {
        // some alias
        var word    = settings.word
        var color   = settings.color
        var evtType = settings.evtType
 
        // default
        var defColor = $that.css('color')
        var defVal   = $that.val()
 
        if (defVal == '' || defVal == word) {
            $that.css({color: color}).val(word)
        } else {
            $that.css({color: defColor})
        }
 
        function switchStatus(isDef) {
            if (isDef) {
                $that.val('').css({color: defColor})   
            } else {
                $that.val(word).css({color: color})
            }
        }
        function asFocus() {
            $that.bind(evtType, function() {
                var txt = $that.val()
                if (txt == word) {
                    switchStatus(true)
                }
            }).bind('blur', function() {
                var txt = $that.val()
                if (txt == '') {
                    switchStatus(false)
                }
            })
        }
        function asKeydown() {
            $that.bind('focus', function() {
                var elem = $that[0]
                var val  = $that.val()
                if (val == word) {
                    setTimeout(function() {
                        // 光标定位到首位
                        $that.setCursorPosition({index: 0})
                    }, 10)                 
                }
            })
        }
 
        if (evtType == 'focus') {
            asFocus()
        } else if (evtType == 'keydown') {
            asKeydown()
        }
 
        // keydown事件里处理placeholder
        $that.keydown(function() {
            var val = $that.val()
            if (val == word) {
                switchStatus(true)
            }
        }).keyup(function() {
            var val = $that.val()
            if (val == '') {
                switchStatus(false)
                $that.setCursorPosition({index: 0})
            }
        })
    }
 
    return this.each(function() {
        var $elem = $(this)
        bootstrap($elem)
        if ($.isFunction(callback)) callback($elem)
    })
}

}()
</script>

<!-- 法四 (方式二)不使用value，添加一个额外的标签（span）到body里然后绝对定位覆盖到input上面-->
<style type="text/css">
	.p-zcitem {
	    width: 330px;
	    height: 44px;
	    position: relative;
	}
	.p-zcitem .p-input {
	    height: 22px;
	    line-height: 22px;
	    width: 82%;
	    padding: 10px 12% 10px 6%;
	    border: solid 1px #a7abad;
	    border-radius: 3px;
	}
	.p-zcitem .p-tips {
	    position: absolute;
	    height: 44px;
	    line-height: 44px;
	    top: 0;
	    left: 22px;
	    color: #999;
	}
	.p-tips {
		cursor: text;
	}
</style>
<div class="p-zcitem mt40">
<input class="p-input" name="name" id="name" title="请输入手机号" type="text">
<label class="p-tips">请输入手机号</label>
</div>
<script type="text/javascript">
	$(".p-input").map(function(){

		var obj = $(this);
		var timeid = setInterval(function(){
			if(!obj.val()==""){
				obj.siblings(".p-tips").hide();
				clearInterval(timeid);
			}
		},10);
		$(".p-tips").click(function(){
			$(this).siblings(".p-input").focus();

		});
		$(this).bind({
			focus:function(){
				if (this.value == ""){
					$(this).siblings(".p-tips").hide();

				}
			},
			blur:function(){
				if (this.value == ""){
					$(this).siblings(".p-tips").show();

				}
			}
		});
	});
</script>