IE est un ennemi à vie du front-end
Répertoire d'articles
Le problème conduit à
Personne ne connaît cette poignée:
<input name="username" placeholder="请输入用户名" />
Boîte de saisie sur un écran, et un cas où la valeur d'entrée n'est pas 请输入用户名
choisie pour IE10 ne connaît pas la compatibilité de l' espace réservé
J'étais vraiment abasourdi. . .
Analyse calme
L'utilisation d' <label></label>étiquettes
Pourquoi?
Nous devons placer le texte sur la zone de saisie par positionnement, mais cela ne peut pas bloquer le focus de l'entrée, donc cela 伪元素ne fonctionne pas s'il s'agit d'un div normal.
- La balise d'étiquette a une
forpropriété, cliquez lorsque vous pouvez déclencher les composants correspondants - input ne supporte pas les pseudo-éléments, donc même s'il est écrit avec des pseudo-éléments, il est également écrit dans le div parent
Solution de code
structure html
Déterminez d'abord le html. Puisque le positionnement doit être utilisé, nous enveloppons toujours l'entrée avec une couche supplémentaire de div. L'entrée normale sera également enveloppée dans div ~
Puisque la seule question que nous avons à résoudre l'IE, donc labeldefault n'est pas écrit pour ajouter dynamiquement par js
<div class="form-item user-name">
<input name="username" placeholder="请输入用户名" />
</div>
style css
label-placeholder Le style de l'étiquette à ajouter dynamiquement
Également utilisé css 兄弟选择器（+）pour contrôler la zone de saisie pour obtenir le focus, l'étiquette est masquée
.form-item {
position: relative;
}
.label-placeholder {
position: absolute;
top: 0;
bottom: 0;
left: 28px;
font-size: 14px;
text-align: left;
z-index: 10;
color: #999;
}
/* input聚焦的时候，lable自动隐藏 */
.form-item input:focus + .label-placeholder {
display: none;
}
Mettez en surbrillance JS
-
initPlaceholder
- La fermeture est utilisée ici pour éviter un jugement répété de la version d'IE lors de la création plusieurs fois
- Deuxièmement, minimiser l'utilisation de variables globales pour éviter la pollution
-
window.onload
- Toutes les opérations sont effectuées après le montage du nœud dom
-
Utilisez uniquement la version IE 6-9
initPlaceholderLa principale méthode de réception d' un objet, dans lequel l'objet contient targetId, placeholder, blur
correspondant respectivement à l'attribut id de l'entrée à afficher placeholderet un procédé de mise au point de perdre
Il doit être passé par ID ici, car la balise for de l'étiquette ne reconnaît que l'attribut ID
Ensuite, bon package JS, l'utilisation du temps consiste à appeler la initPlaceholderméthode, puis à déterminer automatiquement la version, si la version non-IE, ou non-IE6-9, l'utilisation directe de la fonctionnalité du navigateur, mais toujours enregistrée sur l' blurévénement
var initPlaceholder = (function() {
var userAgent = navigator.userAgent //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 //判断是否IE<11浏览器
var reIE = new RegExp('MSIE (\\d+\\.\\d+);')
var fIEVersion = parseFloat(RegExp['$1']) || -1 // 代表不是IE
return function(data) {
var _data = data || {
}
var targetId = _data.targetId || null
var blurFn = _data.blur || null
if (!targetId) {
throw Error('targetId is cannot be null')
return false
}
var target = document.getElementById(targetId)
if (!target) {
throw Error(targetId + ' is does not exist')
return false
}
// IE 环境
if (fIEVersion >= 6 && fIEVersion <= 9) {
var parent = target.parentNode
var childLabel = document.createElement('label')
childLabel.setAttribute('class', 'label-placeholder')
childLabel.setAttribute('for', targetId)
childLabel.innerHTML = _data.placeholder || ''
parent.appendChild(childLabel)
target.onblur = function(event) {
blurFn && blurFn.call(this, event)
if (this.value != '') {
childLabel.style.display = 'none'
} else {
childLabel.style.display = ''
}
}
} else if (blurFn) {
// 非IE环境，不过有回调方法，直接注册回调方法
target.onblur = blurFn
}
}
})()
window.onload = function() {
initPlaceholder({
targetId: 'username',
placeholder: '请输入用户名',
blur: function(e) {
console.log(e)
console.log(this.value)
}
})
}
Démo complète
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.form-item {
position: relative;
}
.label-placeholder {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 14px;
text-align: left;
z-index: 10;
color: #999;
}
/* input聚焦的时候，lable自动隐藏 */
.form-item input:focus + .label-placeholder {
display: none;
}
</style>
</head>
<body>
<div class="form-item username">
<input name="username" placeholder="请输入用户名" id="username" />
</div>
<div class="form-item">
<input name="username" placeholder="请输入用户名" id="password" />
</div>
<script>
var initPlaceholder = (function() {
var userAgent = navigator.userAgent //取得浏览器的userAgent字符串
var isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 //判断是否IE<11浏览器
var reIE = new RegExp('MSIE (\\d+\\.\\d+);')
var fIEVersion = parseFloat(RegExp['$1']) || -1 // 代表不是IE
return function(data) {
var _data = data || {
}
var targetId = _data.targetId || null
var blurFn = _data.blur || null
if (!targetId) {
throw Error('targetId is cannot be null')
return false
}
var target = document.getElementById(targetId)
if (!target) {
throw Error(targetId + ' is does not exist')
return false
}
// IE 环境
if (fIEVersion >= 7 && fIEVersion <= 10) {
var parent = target.parentNode
var childLabel = document.createElement('label')
childLabel.setAttribute('class', 'label-placeholder')
childLabel.setAttribute('for', targetId)
childLabel.innerHTML = _data.placeholder || ''
parent.appendChild(childLabel)
target.onblur = function(event) {
blurFn && blurFn.call(this, event)
if (this.value != '') {
childLabel.style.display = 'none'
} else {
childLabel.style.display = ''
}
}
} else if (blurFn) {
// 非IE环境，不过有回调方法，直接注册回调方法
target.onblur = blurFn
}
}
})()
window.onload = function() {
initPlaceholder({
targetId: 'username',
placeholder: '请输入用户名',
blur: function(e) {
console.log(e)
console.log(this.value)
}
})
initPlaceholder({
targetId: 'password',
placeholder: '请输入密码'
})
}
</script>
</body>
</html>
Pour résumer
Pour initPlaceholder n'est qu'un simple package, et utilisez autant que possible la syntaxe native JS, après tout, étant donné qu'il s'agit d'un navigateur IE
Deuxièmement, cette limitation de démonstration est toujours très grande, comme le labeltexte et n'est pas centrée verticalement, mais le moyen le plus rapide est centré verticalement line-height. Donc, cela est toujours laissé au scénario commercial spécifique, obtenez la hauteur et définissez-la line-height.
Deuxièmement, la méthode doit reposer sur l'entrée du div parent, et le div parent correspondant ne doit 相对定位être
Bien qu'il soit très limité, je suis très heureux qu'il puisse résoudre le problème d'IE ~
Adresse initiale: utilisez l'étiquette pour résoudre le problème de non-affichage de l'entrée d'espace réservé sous IE10