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

html中，placeholder作為input的一個屬性，起到了在輸入框中佔位並提示的作用。

但是有一些瀏覽器，如chrome，當滑鼠點擊輸入框時，placeholder的值不消失，只有輸入資料才消失，會使前端使用者體驗大打折扣。

看了很多大神的方法，寫了長長的js，看著有點吃力，就想到了下面這種最傻的方法解決了這個問題。

html代碼：

<input type="text" placeholder="多個關鍵詞空格隔開"> 

滑鼠點擊input時，placeholder中的提示資訊消失：

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

PlaceHolder的兩種實現方式

placeholder屬性是HTML5 中為input添加的。在input上提供一個預留位置，文字形式展示輸入欄位預期值的提示資訊（hint），該欄位會在輸入為空白時顯示。

如

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

目前瀏覽器的支援情況

然而，雖然IE10+支援placeholder屬性，它的表現與其它瀏覽器也不一致
•IE10+裡滑鼠點擊時（擷取焦點）placeholder文本消失
•Firefox/Chrome/Safari點擊不消失，而是鍵盤輸入時文本消失

這相當噁心，如果使用了placeholder屬性。產品經理還是不依不饒，會講為什麼IE裡是點擊的時候提示文本消失，Chrome裡卻是鍵盤輸入的時候提示文本消失。要求前端工程師改成一樣的表現形式。鑒於此，以下兩種實現方式均不採用原生的placeholder屬性。

兩種方式的思路

1.(方式一)使用input的value作為顯示文本

2.(方式二)不使用value，添加一個額外的標籤（span）到body裡然後絕對位置覆蓋到input上面

兩種方式各有優缺點，方式一佔用了input的value屬性，表單提交時需要額外做一些判斷工作，方式二則使用了額外的標籤。

方式一

/*** 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)})}

方式2 對於以下情境不適合

1. input初始隱藏

　　此時無法取到input的offset，繼而無法定位span到input上面。

2. 包含input的頁面dom結構發生變化

　　比如頁面裡刪除了一些元素或添加了一些元素，導致input向上或向下位移，而此時span則沒有位移（span相對body定位）。這比較噁心，可以考慮把span作為input的兄弟元素，即相對內層div定位（而不是body）。但這樣必須強制給外層div添加position:relative，添加後可能會對頁面配置產生一定影響。