Le message d'invite dans l'espace réservé disparaît une fois la saisie cliqué_javascript skills

En HTML, l'espace réservé, en tant qu'attribut de saisie, joue le rôle d'occuper une place dans la zone de saisie et d'invite.

Cependant, dans certains navigateurs, comme Chrome, lorsque la souris clique sur la zone de saisie, la valeur de l'espace réservé ne disparaît pas uniquement lorsque les données sont saisies, ce qui réduit considérablement l'expérience utilisateur frontale. .

Après avoir lu de nombreuses méthodes d'experts et écrit un long js, c'était un peu difficile, alors j'ai pensé à la méthode la plus stupide suivante pour résoudre ce problème.

Code HTML :

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

Lorsque la souris clique sur l'entrée, le message d'invite dans l'espace réservé disparaît :

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

Deux façons d'implémenter PlaceHolder

L'attribut placeholder est entrée en HTML5 ajoutée. Fournissez un espace réservé sur l'entrée qui affiche un indice (indice) de la valeur attendue du champ de saisie sous forme de texte. Le champ sera affiché lorsque l'entrée est vide.

Comme

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

Prise en charge actuelle du navigateur

Cependant, bien que IE10 prenne en charge l'attribut placeholder , ses performances ne sont pas cohérentes avec celles des autres navigateurs
•Dans IE10, le texte de l'espace réservé disparaît lorsque vous cliquez sur la souris (obtient le focus)
•Firefox/Chrome/Safari ne disparaît pas lorsque vous cliquez dessus, mais le texte disparaît lors de la saisie au clavier

C'est assez dégoûtant, si l'attribut placeholder est utilisé. Le chef de produit hésite toujours à abandonner et expliquera pourquoi le texte d'invite disparaît lorsque vous cliquez dessus dans IE, mais le texte d'invite disparaît lors de la saisie sur le clavier dans Chrome. Demandez à l'ingénieur front-end de le modifier pour la même forme d'expression. Compte tenu de cela, les deux implémentations suivantes n’utilisent pas l’attribut d’espace réservé natif.

Deux façons de penser

1. (Méthode 1) Utiliser la valeur de l'entrée comme texte d'affichage

2 (Méthode 2) N'utilisez pas de valeur, ajoutez une balise supplémentaire (span) au corps, puis recouvrez-la d'un positionnement absolu sur l'entrée

Les deux méthodes ont leurs propres avantages et inconvénients. La première méthode occupe l'attribut value de. la saisie, qui est requise lors de la soumission du formulaire. Pour effectuer un travail de jugement supplémentaire, la deuxième méthode utilise des étiquettes supplémentaires.

Méthode 1

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

Méthode 2

$.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)
})
}

La méthode 2 ne convient pas aux scénarios suivants

Masquage initial de l'entrée

À ce stade, le décalage de l'entrée ne peut pas être obtenu, et le span ne peut pas être positionné sur l'entrée.

2. La structure dom de la page contenant l'entrée change

Par exemple, certains éléments sont supprimés ou ajoutés à la page, provoquant un déplacement de l'entrée vers le haut ou vers le bas A ce moment, la travée n'a pas de décalage (la travée est positionnée par rapport au corps). C'est dégoûtant. Vous pouvez envisager d'utiliser span comme élément d'entrée frère, c'est-à-dire positionné par rapport au p interne (au lieu du corps). Mais cela doit forcer l'ajout de position:relative au p externe, ce qui peut avoir un certain impact sur la mise en page.