：この記事はで再現された猿2048ウェブサイト⇨ https://www.mk2048.com/blog/blog.php?id=hc0c1iiccb
効果
完全な図波効果を初めて目
需要
4または6位入力メッセージ認証コード、キーボード入力が完全な崩壊であります
実装手順
第一歩
レイアウトレイアウト
<div class="security-code-wrap">
<label for="code">
<ul class="security-code-container">
<li class="field-wrap" v-for="(item, index) in number" :key="index">
<i class="char-field">{{value[index] || placeholder}}</i>
</li>
</ul>
</label>
<input ref="input" class="input-code" @keyup="handleInput($event)" v-model="value"
id="code" name="code" type="tel" :maxlength="number"
autocorrect="off" autocomplete="off" autocapitalize="off">
</div>
- 入力ボックスをシミュレートするために使用のli要素が表示され、他の目的は、単に意味論に、もちろん、あなたはまた、例えば、div要素をシミュレートするために、他の要素を使用することはできません。
- ラベル・タグを使用する利点は、意味的なソリューションを実現する一方でクリック・イベント入力に関連付けることができるということです、それはまた、私たちはJSで仮想キーボードを喚起する必要がなくなります。
隠された入力ボックス
.input-code {
position: absolute;
left: -9999px;
top: -9999px;
}
- 仮想キーボードを喚起され、画面の表示領域の外側に位置する実際の入力ボックスは、ページの最上部までではありません。だから、確認コード入力コンポーネントがブロックされることができない場合、仮想キーボードを配置する必要があります。
第二のステップ
入力コードの処理
handleSubmit () {
this.$emit('input', this.value)
},
handleInput (e) {
if (e.target.value.length >= this.length) {
this.hideKeyboard()
}
this.handleSubmit()
}
- 入力は、割当再集束した後、最後に表示されたカーソルを置き、第一の組の前に入力カーソルを再集束リアフレームのAndroidデフォーカスの入力端を解決するために、値の入力ボックスを割り当てます背後にあります。
第三段階
完了したら、仮想キーボードを閉じます
hideKeyboard() {
// 输入完成隐藏键盘
document.activeElement.blur() // ios隐藏键盘
this.$refs.input.blur() // android隐藏键盘
}
コンポーネントの完全なコード
<template>
<div class="security-code-wrap">
<label :for="`code-${uuid}`">
<ul :class="`${theme}-container security-code-container`">
<li class="field-wrap" v-for="(item, index) in length" :key="index">
<i class="char-field">{{value[index] || placeholder}}</i>
</li>
</ul>
</label>
<input ref="input" class="input-code" @keyup="handleInput($event)" v-model="value"
:id="`code-${uuid}`" :name="`code-${uuid}`" type="tel" :maxlength="length"
autocorrect="off" autocomplete="off" autocapitalize="off">
</div>
</template>
<script>
export default {
name: 'SecurityCode',
// component properties
props: {
length: {
type: Number,
default: 4
},
placeholder: {
type: String,
default: '-'
},
theme: {
type: String,
default: 'block'
}
},
// variables
data () {
return {
value: ''
}
},
computed: {
uuid () {
return Math.random().toString(36).substring(3, 8)
}
},
methods: {
hideKeyboard () {
// 输入完成隐藏键盘
document.activeElement.blur() // ios隐藏键盘
this.$refs.input.blur() // android隐藏键盘
},
handleSubmit () {
this.$emit('input', this.value)
},
handleInput (e) {
if (e.target.value.length >= this.length) {
this.hideKeyboard()
}
this.handleSubmit()
}
}
}
</script>
<style scoped lang="less">
.security-code-wrap {
display: flex;
align-items: center;
justify-content: center;
}
.security-code-container {
margin: 0;
padding: 0;
display: flex;
.field-wrap {
list-style: none;
display: block;
height: 40px;
width: 40px;
line-height: 40px;
font-size: 16px;
.char-field {
font-style: normal;
}
}
}
.block-container {
justify-content: center;
.field-wrap {
background-color: #fff;
margin: 2px;
color: #000;
}
}
.line-container {
position: relative;
background-color: #fff;
&:after {
box-sizing: border-box;
content: "";
width: 200%;
height: 200%;
transform: scale(.5);
position: absolute;
border: 1px solid #d9d9d9;
top: 0;
left: 0;
transform-origin: 0 0;
border-radius: 4px;
}
.field-wrap {
flex: 1;
position: relative;
&:not(:last-child):after {
content: "";
width: 1px;
height: 50%;
position: absolute;
right: 0;
top: 25%;
background-color: #d9d9d9;
transform: scaleX(.5);
}
}
}
.input-code {
position: absolute;
left: -9999px;
top: -9999px;
}
</style>
コードコンポーネントを使用します
<security-code v-model="code"></security-code>
結論
どのような種類、484とても簡単
アイデアは、次の入力ボックスにジャンプし、このようなアプローチは、目的を達成することができ、完全なモニターを入力して、4つの入力ボックスの始まりですが、それはルールではなく、優雅さを維持するために、より多くのコードを必要とします。
現在の慣行では、アイデアのよりよい実現を持っている場合、私は最善の解決策を考えることができることとなって、だけでなく、翼を願っていました。