入力をクリックすると、プレースホルダー内のプロンプト メッセージが消える_JavaScript スキル

HTML では、プレースホルダーは入力の属性として、入力ボックス内の場所を占め、プロンプトを表示する役割を果たします。

ただし、Chrome などの一部のブラウザでは、入力ボックス上でマウスをクリックしても、データが入力されたときのみプレースホルダーの値が消えないため、フロントエンドが大幅に削減されます。ユーザーエクスペリエンス。

多くのマスターのメソッドを読んで長い JS を書いた後、少し難しそうだったので、この問題を解決する次の最も愚かな方法を考えました。

html コード:

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

マウスで入力をクリックすると、プレースホルダー内のプロンプト メッセージが消えます。

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

PlaceHolder を実装する 2 つの方法

placeholder 属性は次のとおりです。 HTML5での入力が追加されました。入力フィールドの期待値のヒント (ヒント) を表示するプレースホルダーを入力に提供します。フィールドは、入力が空の場合に表示されます。

など

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

現在のブラウザサポート

ただし、IE10+ はプレースホルダー属性をサポートしていますが、そのパフォーマンスも他のブラウザと一貫性がありません
• IE10 以降では、マウスをクリックするとプレースホルダー テキストが消えます (フォーカスを取得します)
• Firefox/Chrome/Safari はクリックしても消えませんが、キーボード入力するとテキストが消えます

プレースホルダー属性が使用されている場合、これは非常に不快です。プロダクト マネージャーはまだ諦めず、IE ではプロンプト テキストをクリックするとプロンプト テキストが消えるのに、Chrome ではキーボードを入力するとプロンプト テキストが消える理由を説明する予定です。フロントエンドエンジニアに同じ表現に変更してもらいます。これを考慮して、次の 2 つの実装ではネイティブのプレースホルダー属性を使用しません。

2 つの考え方

1. (方法 1) 入力の値を表示テキストとして使用します

2. value を使用せず、本文に追加のタグ (スパン) を追加して、入力

の絶対位置でカバーします。どちらの方法にも独自の長所と短所があります。方法 1 は、value 属性を使用します。フォームを送信するときに必要な入力。追加の判断作業を行うために、2 番目のメソッドでは追加のラベルを使用します。

方法 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)
})
}

方法 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)
})
}

方法 2 は、次のシナリオには適していません

1. 入力の初期非表示

この時点では入力のオフセットが取得できず、入力上にスパンを配置することができません。

2. 入力を含むページの dom 構造が変更されます

たとえば、一部の要素がページに削除または追加され、入力が上にシフトしたり、このとき、スパンにはオフセットがありません (スパンはボディに対して配置されます)。これは不快です。span を入力の兄弟要素として使用すること、つまり (body ではなく) 内部の p を基準にして配置することを検討できます。ただし、これにより、外側の p に対して Position:relative を強制的に追加する必要があり、ページ レイアウトに一定の影響を与える可能性があります。