首頁  >  文章  >  web前端  >  input點選後placeholder中的提示訊息消失_javascript技巧

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

不言
不言原創
2018-05-28 15:23:293242瀏覽

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屬性。產品經理還是不依不饒,會講為什麼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: &#39;&#39;,
color: &#39;#ccc&#39;,
evtType: &#39;focus&#39;
}, option)
function bootstrap($that) {
// some alias 
var word = settings.word
var color = settings.color
var evtType = settings.evtType
// default
var defColor = $that.css(&#39;color&#39;)
var defVal = $that.val()
if (defVal == &#39;&#39; || defVal == word) {
$that.css({color: color}).val(word)
} else {
$that.css({color: defColor})
}
function switchStatus(isDef) {
if (isDef) {
$that.val(&#39;&#39;).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(&#39;blur&#39;, function() {
var txt = $that.val()
if (txt == &#39;&#39;) {
switchStatus(false)
}
})
}
function asKeydown() {
$that.bind(&#39;focus&#39;, function() {
var elem = $that[0]
var val = $that.val()
if (val == word) {
setTimeout(function() {
// 光标定位到首位
$that.setCursorPosition({index: 0})
}, 10) 
}
})
}
if (evtType == &#39;focus&#39;) {
asFocus()
} else if (evtType == &#39;keydown&#39;) {
asKeydown()
}
// keydown事件里处理placeholder
$that.keydown(function() {
var val = $that.val()
if (val == word) {
switchStatus(true)
}
}).keyup(function() {
var val = $that.val()
if (val == &#39;&#39;) {
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: &#39;&#39;,
color: &#39;#999&#39;,
evtType: &#39;focus&#39;,
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(&#39;font-size&#39;)
var fontFamily = $that.css(&#39;font-family&#39;)
var paddingLeft = $that.css(&#39;padding-left&#39;)
// process
paddingLeft = parseInt(paddingLeft, 10) + diffPaddingLeft
// redner 
var $placeholder = $(&#39;&#39;)
$placeholder.css({
position: &#39;absolute&#39;,
zIndex: &#39;20&#39;,
color: color,
width: (width - paddingLeft) + &#39;px&#39;,
height: height + &#39;px&#39;,
fontSize: fontSize,
paddingLeft: paddingLeft + &#39;px&#39;,
fontFamily: fontFamily
}).text(word).hide()
// 位置调整 
move()
// textarea 不加line-heihgt属性
if ($that.is(&#39;input&#39;)) {
$placeholder.css({
lineHeight: height + &#39;px&#39;
})
}
$placeholder.appendTo(document.body)
// 内容为空时才显示,比如刷新页面输入域已经填入了内容时
var val = $that.val()
if ( val == &#39;&#39; && $that.is(&#39;:visible&#39;) ) {
$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 == &#39;&#39;) {
$placeholder.show()
}
})
}
function asKeydown() {
$placeholder.click(function() {
$that[0].focus()
})
}
if (evtType == &#39;focus&#39;) {
asFocus()
} else if (evtType == &#39;keydown&#39;) {
asKeydown()
}
$that.keyup(function() {
var txt = $that.val()
if (txt == &#39;&#39;) {
$placeholder.show()
} else {
$placeholder.hide()
}
})
// 窗口缩放时处理
$(window).resize(function() {
move()
})
// cache
$that.data(&#39;el&#39;, $placeholder)
$that.data(&#39;move&#39;, move)
}
return this.each(function() {
var $elem = $(this)
bootstrap($elem)
if ($.isFunction(callback)) callback($elem)
})
}


方式2 對於下列場景不適合


1. input初始隱藏

1. input初始隱藏

1. input初始隱藏

  此時無法取到input的offset,繼而無法定位span到input上面。 2. 包含input的頁面dom結構發生變化  例如頁面裡刪除了一些元素或添加了一些元素,導致input向上或向下偏移,而此時span則沒有偏移(span相對body定位)。這比較噁心,可以考慮把span當作input的兄弟元素,也就是相對內層p定位(而不是body)。但這樣必須強制給外層p添加position:relative,新增後可能會對頁面佈局產生一定影響。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn