Mesej gesaan dalam pemegang tempat hilang selepas input kemahiran clicked_javascript

Dalam HTML, pemegang tempat, sebagai atribut input, memainkan peranan untuk menduduki tempat dalam kotak input dan menggesa.

Walau bagaimanapun, dalam sesetengah penyemak imbas, seperti Chrome, apabila tetikus mengklik pada kotak input, nilai pemegang tempat tidak hilang apabila data dimasukkan, yang sangat mengurangkan pengalaman pengguna bahagian hadapan .

Selepas membaca banyak kaedah pakar dan menulis js yang panjang, ia agak sukar, jadi saya memikirkan kaedah paling bodoh berikut untuk menyelesaikan masalah ini.

kod html:

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

Apabila tetikus mengklik pada input, mesej gesaan dalam ruang letak hilang:

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

Dua cara untuk melaksanakan PlaceHolder

Atribut pemegang tempat ialah input dalam HTML5 ditambah. Sediakan pemegang tempat pada input yang memaparkan pembayang (hint) nilai jangkaan medan input dalam bentuk teks Medan akan dipaparkan apabila input kosong.

Seperti

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

Sokongan penyemak imbas semasa

Walau bagaimanapun, walaupun IE10 menyokong atribut pemegang tempat , prestasinya tidak konsisten dengan pelayar lain
•Dalam IE10, teks pemegang tempat hilang apabila tetikus diklik (mendapat fokus)
•Firefox/Chrome/Safari tidak hilang apabila diklik, tetapi teks hilang apabila input papan kekunci

Ini agak menjijikkan, jika atribut pemegang tempat digunakan. Pengurus produk masih enggan menyerah, dan akan menerangkan sebab teks gesaan hilang apabila mengklik padanya dalam IE, tetapi teks gesaan hilang apabila menaip pada papan kekunci dalam Chrome. Minta jurutera bahagian hadapan menukarnya kepada bentuk ungkapan yang sama. Memandangkan perkara ini, dua pelaksanaan berikut tidak menggunakan atribut pemegang tempat asli.

Dua cara berfikir

1 (Kaedah 1) Gunakan nilai input sebagai teks paparan

2. Jangan gunakan nilai, tambahkan teg tambahan (span) pada badan dan kemudian tutupnya dengan kedudukan mutlak pada input

Kedua-dua kaedah mempunyai kelebihan dan kekurangannya sendiri Kaedah satu menduduki atribut nilai input, yang diperlukan semasa menyerahkan borang Untuk melakukan beberapa kerja penghakiman tambahan, kaedah kedua menggunakan label tambahan.

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

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

Kaedah 2 tidak sesuai untuk senario berikut

1

Pada masa ini, offset input tidak boleh diperolehi dan rentang tidak boleh diletakkan pada input.

2. Struktur dom halaman yang mengandungi input berubah

Contohnya, beberapa elemen dipadamkan atau ditambahkan pada halaman, menyebabkan input beralih ke atas atau ke bawah. Pada masa ini, rentang tidak mempunyai offset (span diposisikan relatif kepada badan). Ini menjijikkan. Anda boleh mempertimbangkan untuk menggunakan span sebagai elemen input saudara, iaitu, diposisikan relatif kepada p dalam (bukan badan). Tetapi ini mesti memaksa penambahan position:relative kepada p luar, yang mungkin mempunyai kesan tertentu pada susun atur halaman.