input点击后placeholder中的提示消息消失

<input type="text" placeholder="多个关键词空格隔开"> 

<input type="text" placeholder="多个关键词空格隔开" onfocus="this.placeholder=‘‘" onblur="this.placeholder=‘多个关键词空格隔开‘">

<input type="text" name="loginName" placeholder="邮箱/手机号/QQ号"> 

/*** 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.wordvar color = settings.colorvar evtType = settings.evtType// defaultvar 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)})}

$.fn.placeholder = function(option, callback) {var settings = $.extend({word: '',color: '#999',evtType: 'focus',zIndex: 20,diffPaddingLeft: 3}, option)function bootstrap($that) {// some alias var word = settings.wordvar color = settings.colorvar evtType = settings.evtTypevar zIndex = settings.zIndexvar diffPaddingLeft = settings.diffPaddingLeft// default cssvar width = $that.outerWidth()var height = $that.outerHeight()var fontSize = $that.css('font-size')var fontFamily = $that.css('font-family')var paddingLeft = $that.css('padding-left')// processpaddingLeft = parseInt(paddingLeft, 10) + diffPaddingLeft// redner var $placeholder = $('<span class="placeholder">')$placeholder.css({position: 'absolute',zIndex: '20',color: color,width: (width - paddingLeft) + 'px',height: height + 'px',fontSize: fontSize,paddingLeft: paddingLeft + 'px',fontFamily: fontFamily}).text(word).hide()// 位置调整 move()// textarea 不加line-heihgt属性if ($that.is('input')) {$placeholder.css({lineHeight: height + 'px'})}$placeholder.appendTo(document.body)// 内容为空时才显示，比如刷新页面输入域已经填入了内容时var val = $that.val()if ( val == '' && $that.is(':visible') ) {$placeholder.show()}function hideAndFocus() {$placeholder.hide()$that[0].focus()}function move() {var offset = $that.offset()var top = offset.topvar left = offset.left$placeholder.css({top: top,left: left})}function asFocus() {$placeholder.click(function() {hideAndFocus()// 盖住后无法触发input的click事件，需要模拟点击下setTimeout(function(){$that.click()}, 100)})// IE有些bug，原本不用加此句$that.click(hideAndFocus)$that.blur(function() {var txt = $that.val()if (txt == '') {$placeholder.show()}})}function asKeydown() {$placeholder.click(function() {$that[0].focus()})}if (evtType == 'focus') {asFocus()} else if (evtType == 'keydown') {asKeydown()}$that.keyup(function() {var txt = $that.val()if (txt == '') {$placeholder.show()} else {$placeholder.hide()}})// 窗口缩放时处理$(window).resize(function() {move()})// cache$that.data('el', $placeholder)$that.data('move', move)}return this.each(function() {var $elem = $(this)bootstrap($elem)if ($.isFunction(callback)) callback($elem)})}