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添加的。在input上提供一個佔位符,文字形式展示輸入欄位預期值的提示訊息(hint),該欄位會在輸入為空時顯示。<input type="text" name="loginName" placeholder="邮箱/手机号/QQ号">目前瀏覽器的支持情況然而,雖然IE10+支持placeholder屬性,它的表現與其它瀏覽器也不一致
•IE10+裡滑鼠點擊時(取得焦點)placeholder文字消失
•Firefox/Chrome/Safari點擊不消失,而是鍵盤輸入時文字消失
方式一
/** * 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) }) }
方式
方式
方式$.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.word var color = settings.color var evtType = settings.evtType var zIndex = settings.zIndex var diffPaddingLeft = settings.diffPaddingLeft // default css var 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') // process paddingLeft = parseInt(paddingLeft, 10) + diffPaddingLeft // redner var $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.top var 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) }) }
1. input初始隱藏
1. input初始隱藏
1. input初始隱藏
此時無法取到input的offset,繼而無法定位span到input上面。 2. 包含input的頁面dom結構發生變化 例如頁面裡刪除了一些元素或添加了一些元素,導致input向上或向下偏移,而此時span則沒有偏移(span相對body定位)。這比較噁心,可以考慮把span當作input的兄弟元素,也就是相對內層p定位(而不是body)。但這樣必須強制給外層p添加position:relative,新增後可能會對頁面佈局產生一定影響。