Die Eingabeaufforderungsmeldung im Platzhalter verschwindet, nachdem auf die Eingabe geklickt wurde_Javascript-Kenntnisse

In HTML spielt der Platzhalter als Attribut der Eingabe die Rolle, einen Platz im Eingabefeld einzunehmen und Eingabeaufforderungen bereitzustellen.

In einigen Browsern wie Chrome verschwindet der Platzhalterwert jedoch nicht, wenn die Maus auf das Eingabefeld klickt. Er verschwindet nur, wenn die Daten eingegeben werden, was die Front-End-Benutzererfahrung erheblich beeinträchtigt .

Nachdem ich die Methoden vieler Experten gelesen und lange JS geschrieben hatte, war es etwas schwierig, also dachte ich mir die folgende dümmste Methode zur Lösung dieses Problems.

HTML-Code:

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

Wenn die Maus auf die Eingabe klickt, verschwindet die Eingabeaufforderung im Platzhalter:

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

Zwei Möglichkeiten, PlaceHolder zu implementieren

Das Platzhalterattribut ist Eingabe in HTML5 hinzugefügt. Geben Sie einen Platzhalter für die Eingabe an, der einen Hinweis (Hinweis) auf den erwarteten Wert des Eingabefelds in Textform anzeigt. Das Feld wird angezeigt, wenn die Eingabe leer ist.

Zum Beispiel

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

Aktuelle Browserunterstützung

Obwohl IE10 das Platzhalterattribut unterstützt, seine Leistung stimmt nicht mit der anderer Browser überein
•In IE10 verschwindet der Platzhaltertext, wenn mit der Maus geklickt wird (erhält den Fokus)
•Firefox/Chrome/Safari verschwindet nicht, wenn geklickt wird, aber der Text verschwindet, wenn die Tastatur eingegeben wird

Das ist ziemlich ekelhaft, wenn das Platzhalterattribut verwendet wird. Der Produktmanager gibt immer noch nicht auf und erklärt, warum der Eingabeaufforderungstext verschwindet, wenn er im IE darauf klickt, der Eingabeaufforderungstext jedoch verschwindet, wenn er in Chrome auf der Tastatur tippt. Bitten Sie den Front-End-Ingenieur, es in die gleiche Ausdrucksform zu ändern. Aus diesem Grund verwenden die folgenden beiden Implementierungen nicht das native Platzhalterattribut.

Zwei Denkweisen

1 (Methode 1) Verwenden Sie den Wert der Eingabe als Anzeigetext

2. Verwenden Sie keinen Wert, fügen Sie dem Körper ein zusätzliches Tag (Span) hinzu und bedecken Sie es dann mit der absoluten Positionierung auf der Eingabe.

Beide Methoden haben ihre eigenen Vor- und Nachteile. Methode eins belegt das Wertattribut von Die Eingabe, die beim Absenden des Formulars erforderlich ist, verwendet die zweite Methode, um zusätzliche Beurteilungsarbeit zu leisten.

Methode 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)
})
}

Methode 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)
})
}

Methode 2 ist für die folgenden Szenarien nicht geeignet

Anfängliches Ausblenden der Eingabe

Zu diesem Zeitpunkt kann der Offset der Eingabe nicht ermittelt werden und die Spanne kann nicht auf der Eingabe positioniert werden.

2. Die Dom-Struktur der Seite, die die Eingabe enthält, ändert sich

Beispielsweise werden einige Elemente gelöscht oder zur Seite hinzugefügt, wodurch sich die Eingabe nach oben verschiebt oder Zu diesem Zeitpunkt weist die Spannweite keinen Versatz auf (Spannweite ist relativ zum Körper positioniert). Das ist widerlich. Sie können in Betracht ziehen, span als Geschwisterelement der Eingabe zu verwenden, das heißt relativ zum inneren p (anstelle von body) zu positionieren. Dies muss jedoch das Hinzufügen von position:relative zum äußeren p erzwingen, was einen gewissen Einfluss auf das Seitenlayout haben kann.