input點擊后placeholder中的提示消息消失_javascript技巧

<input type="text" placeholder="多個關(guān)鍵詞空格隔開">

<input type="text" placeholder="多個關(guān)鍵詞空格隔開" onfocus="this.placeholder=‘‘" onblur="this.placeholder=‘多個關(guān)鍵詞空格隔開‘">

<input type="text" name="loginName" placeholder="郵箱/手機號/QQ號">

/**
* PlaceHolder組件
* $(input).placeholder({
* word: // @string 提示文本
* color: // @string 文本顏色
* evtType: // @string focus|keydown 觸發(fā)placeholder的事件類型
* })
*
* NOTE：
* evtType默認(rèn)是focus，即鼠標(biāo)點擊到輸入域時默認(rèn)文本消失，keydown則模擬HTML5 placeholder屬性在Firefox/Chrome里的特征，光標(biāo)定位到輸入域后鍵盤輸入時默認(rèn)文本才消失。
* 此外，對于HTML5 placeholder屬性，IE10+和Firefox/Chrome/Safari的表現(xiàn)形式也不一致，因此內(nèi)部實現(xiàn)不采用原生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() {
// 光標(biāo)定位到首位
$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)
})
}