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

<!-- 法一 利用h5标签 但ie10以下不兼容-->
<input type="text" name="" placeholder="请输入提示文字">
<!-- 法二 利用默认value 关于input 密码框提示文字须如下-->
<input type="text" name="" value="请输入提示文字" onfocus="if(this.value==defaultValue){this.value='';}" onblur="if(!value){value=defaultValue}">
<!-- 此方式ie8以下不兼容 -->
<input type="text" value="请输入密码!" onfocus="if(this.value==defaultValue) {this.value='';this.type='password'}" onblur="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>