IEはフロントエンドの生涯の敵です
問題は
誰もこのハンドルを知りません：
<input name="username" placeholder="请输入用户名" />
ディスプレイ上の入力ボックス、および请输入用户名
IE10に入力値が選択されていない場合は、プレースホルダーの互換性がわかりません
本当にびっくりしました。。。
穏やかな分析
<label></label>ラベルの使用
どうして？
配置して入力ボックスにテキストを配置する必要がありますが、入力のフォーカスをブロックできないため、通常のdivであるかどうか伪元素は機能しません。
- ラベルタグには
forプロパティがあり、対応するコンポーネントをトリガーできるときにクリックします - inputは疑似要素をサポートしていないため、疑似要素で記述されている場合でも、親divにも記述されます。
コードソリューション
html構造
最初にhtmlを決定します。ポジショニングが使用されるため、入力をdivの追加レイヤーでラップします。通常の入力もdiv〜でラップされます
IEを解決する必要がある唯一の質問なので、labelデフォルトはjsによって動的に追加するように記述されていません
<div class="form-item user-name">
<input name="username" placeholder="请输入用户名" />
</div>
cssスタイル
label-placeholder 動的に追加されるラベルのスタイルですか
また、css兄弟选择器（+）を使用して入力ボックスを制御し、フォーカスを取得します。ラベルは非表示になっています
.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;
}
JSを強調表示
-
initPlaceholder
- クロージャは、複数回作成するときにIEバージョンの繰り返しの判断を避けるためにここで使用されます
- 第二に、汚染を回避するためにグローバル変数の使用を最小限に抑えます
-
window.onload
- すべての操作は、DOMノードがマウントされた後に実行されます
-
IE6-9バージョンのみを使用してください
initPlaceholderオブジェクトが含まれている前記オブジェクトを受信するメイン方法targetId、placeholder、blur
それぞれ表示される入力のid属性に対応placeholderし、フォーカスを失う方法
ラベルのforタグはID属性のみを認識するため、ここではIDで渡す必要があります
次に、JSの優れたパッケージです。時間の使用はinitPlaceholderメソッドを呼び出すことです。その後、バージョンを自動的に判別します。非IEまたは非IE6-9バージョンの場合、ブラウザー機能を直接使用しますが、blurイベントに登録されます。
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)
}
})
}
完全なデモ
<!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>
総括する
initPlaceholderは単なるパッケージであり、IEブラウザーであることを考えると、結局のところ、可能な限りJSネイティブ構文を使用します。
第二に、このデモの制限はlabelテキストなど非常に大きく、垂直方向に中央揃えされていませんが、最速の方法は垂直方向に中央揃えline-heightです。したがって、これはまだ特定のビジネスシナリオに任されており、高さを取得して設定しline-heightます。
第二に、この方法は、親のdivの入力に依存しなければならない、と対応する親のdivがしなければならない相对定位唯一のこと
非常に限られていますが、IEの問題を解決できてとても嬉しいです〜