この記事は、携帯電話番号と銀行カードの同期表示機能の簡単な実現について皆さんと共有するもので、興味のある友達は見てください
これはとある同盟のインタビューの質問です
明確なアイデアを持ち、それを書きながら最適化することがすべてではないでしょうか?
その時、私はプレビューボックスの値を計算するために計算されたプロパティを使用するというアイデアだと言いました。入力ボックスの内容に基づいて
フォーカスとブラーのイベントを処理するだけです
手書きで書く必要がありますが、面接官は私が言葉を失うことはないと考えています
入力ボックスの入力内容の長さが0より大きく、プレビュー情報が表示されます
カーソルが離れて閉じますプレビュー情報
4桁ごとに特殊文字を挿入します
プレビュー情報に入力内容は変更されません
v-model其实是个语法糖
分开写为v-bind:value和v-on:input
<template lang="html">
<p class="zInput">
<p class="big-show" v-show="showBig">{{txt2}}</p>
<input type="text"
@blur="handerBlur"
@focus="handerFocus"
v-model="txt">
</p>
</template>
<script>
export default {
name: 'z-input',
data () {
return {
txt: '',
showBig: false,
}
},
computed: {
txt2: function () {
if (this.txt.length > 0) {
this.showBig = true
}
return this.getStr(this.txt, 4)
}
},
methods: {
handerBlur () {
this.showBig = false
},
handerFocus (evt) {
if (evt.target.value.length > 0) {
this.showBig = true
}
},
getStr (str, len) {
let lenth = str.length
let len1 = len - 1
let newStr = ''
for (var i = 0; i < lenth; i++) {
if (i % len === len1 && i > 0) {
newStr += str.charAt(i) + '_'
} else {
newStr += str.charAt(i)
}
}
if (newStr.length % (len + 1) === 0) {
// 解决最后一位为补充项问题
newStr = newStr.substr(0, newStr.length - 1)
}
return newStr
},
}
}
</script>
<style lang="less">
.zInput{
position: relative;
.big-show {
position: absolute;
top: -40px;
font-size: 36px;
line-height: 40px;
background-color: red;
}
}
.zInput{
top:50px;
}
</style>限制只能输入数字
首先想到的是在keyup时把非数字过滤掉
但是事实是先执行keydown->handerInput->keyup
那就在keydown时处理呗，但是keydown修改evt.target.value后
在handerInput取到的evt.target.value依旧是未处理的所以说在keydown处理不起作用
必须要在handerInput計算された属性を使用して判断するだけです
<template lang="html">
<p class="zInput">
<p class="big-show" v-show="showBig">{{txt2}}</p>
<input type="text"
@blur="handerBlur"
@focus="handerFocus"
v-bind:value="txt"
v-on:input="handerInput">
</p>
</template>
<script>
export default {
name: 'z-input',
data () {
return {
txt: '',
txt2: '',
showBig: false,
}
},
methods: {
handerInput (evt) {
let val = evt.target.value.substr(0, 13)
// 限制长度13位
this.txt = val
evt.target.value = val
if (this.txt.length > 0) {
this.showBig = true
}
this.txt2 = this.getStr(this.txt, 4)
},
handerBlur () {
this.showBig = false
},
handerFocus (evt) {
if (evt.target.value.length > 0) {
this.showBig = true
}
},
getStr (str, len) {
let lenth = str.length
let len1 = len - 1
let newStr = ''
for (var i = 0; i < lenth; i++) {
if (i % len === len1 && i > 0) {
newStr += str.charAt(i) + '_'
} else {
newStr += str.charAt(i)
}
}
if (newStr.length % (len + 1) === 0) {
// 解决最后一位为补充项问题
newStr = newStr.substr(0, newStr.length - 1)
}
return newStr
},
}
}
</script>長さ制限が追加される場合、上記の方法は不適切です、実装計画を変更してください
v-model< /code> は実際には糖衣構文です<p class="article fmt article__content"> <code>v-bind:value と v-on:input として別々に記述されます<input type="text"
@blur="handerBlur"
@focus="handerFocus"
@keyup="handerKeyup"
@keydown="handerKeydown"
v-bind:value="txt"
v-on:input="handerInput">
<script>
handerKeydown (evt) {
console.log('handerKeydown')
evt.target.value = evt.target.value.replace(/[^\d]/g, '')
// 这里修改不起作用
},
handerKeyup (evt) {
console.log('keyup')
evt.target.value = evt.target.value.replace(/[^\d]/g, '')
// 这里执行顺序靠后 修改无用
},
handerInput (evt) {
let val = evt.target.value.substr(0, 13).replace(/[^\d]/g, '')
console.log('handerInput__val', val)
//这里拿到的val是纯数字
evt.target.value = val
this.txt = val
if (this.txt.length > 0) {
this.showBig = true
}
this.txt2 = this.getStr(this.txt, 4)
},
</script>keyup 中に数字以外をフィルタリングすることですkeydown->handerInput が最初に実行されるということです。 >->keyup
その後、keydown で処理されますが、keydown 後に 内の <code>evt.target.value が変更されます
evt.target.value はまだ処理されていないため、keydown での処理は機能しません handerInput で行う必要がありますcode code> 処理時 <template lang="html">
<p class="zInput">
<p class="big-show" v-show="showBig">{{txt2}}</p>
<input type="text"
@blur="handerBlur"
@focus="handerFocus"
v-model="txt">
</p>
</template>
<script>
export default {
name: 'z-input',
data () {
return {
txt: '',
showBig: false,
}
},
computed: {
txt2: function () {
if (this.txt.length > 0) {
this.showBig = true
}
return this.getStr(this.txt, 4)
}
},
methods: {
handerBlur () {
this.showBig = false
},
handerFocus (evt) {
if (evt.target.value.length > 0) {
this.showBig = true
}
},
getStr (str, len) {
let lenth = str.length
let len1 = len - 1
let newStr = ''
for (var i = 0; i < lenth; i++) {
if (i % len === len1 && i > 0) {
newStr += str.charAt(i) + '_'
} else {
newStr += str.charAt(i)
}
}
if (newStr.length % (len + 1) === 0) {
// 解决最后一位为补充项问题
newStr = newStr.substr(0, newStr.length - 1)
}
return newStr
},
}
}
</script>
<style lang="less">
.zInput{
position: relative;
.big-show {
position: absolute;
top: -40px;
font-size: 36px;
line-height: 40px;
background-color: red;
}
}
.zInput{
top:50px;
}
</style>ログイン後にコピーログイン後にコピー
そのときは、アイデアを話した後、計算されたプロパティを使用して、入力ボックスの内容に基づいてプレビュー ボックスの値を計算します。
フォーカスとブラーのイベントを処理するだけです。下記の通り
入力ボックスの入力内容のデータ長が0より大きく、プレビュー情報が表示されます
v-model其实是个语法糖
分开写为v-bind:value和v-on:input
<template lang="html">
<p class="zInput">
<p class="big-show" v-show="showBig">{{txt2}}</p>
<input type="text"
@blur="handerBlur"
@focus="handerFocus"
v-bind:value="txt"
v-on:input="handerInput">
</p>
</template>
<script>
export default {
name: 'z-input',
data () {
return {
txt: '',
txt2: '',
showBig: false,
}
},
methods: {
handerInput (evt) {
let val = evt.target.value.substr(0, 13)
// 限制长度13位
this.txt = val
evt.target.value = val
if (this.txt.length > 0) {
this.showBig = true
}
this.txt2 = this.getStr(this.txt, 4)
},
handerBlur () {
this.showBig = false
},
handerFocus (evt) {
if (evt.target.value.length > 0) {
this.showBig = true
}
},
getStr (str, len) {
let lenth = str.length
let len1 = len - 1
let newStr = ''
for (var i = 0; i < lenth; i++) {
if (i % len === len1 && i > 0) {
newStr += str.charAt(i) + '_'
} else {
newStr += str.charAt(i)
}
}
if (newStr.length % (len + 1) === 0) {
// 解决最后一位为补充项问题
newStr = newStr.substr(0, newStr.length - 1)
}
return newStr
},
}
}
</script>限制只能输入数字
首先想到的是在keyup时把非数字过滤掉
但是事实是先执行keydown->handerInput->keyup
那就在keydown时处理呗，但是keydown修改evt.target.value后
在handerInput取到的evt.target.value依旧是未处理的所以说在keydown处理不起作用
必须要在handerInputカーソルが離れてプレビュー情報を閉じます
プレビュー情報は4桁ごとに特殊文字が挿入され、入力内容は変わりません
計算された属性を使用して判断するだけです 以上が携帯電話番号とキャッシュカードの同期表示機能を簡単実現 - マイコラムSifuの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。長さ制限があるため、上記の方法は適切ではありません。実装計画を変更してください<input type="text"
@blur="handerBlur"
@focus="handerFocus"
@keyup="handerKeyup"
@keydown="handerKeydown"
v-bind:value="txt"
v-on:input="handerInput">
<script>
handerKeydown (evt) {
console.log('handerKeydown')
evt.target.value = evt.target.value.replace(/[^\d]/g, '')
// 这里修改不起作用
},
handerKeyup (evt) {
console.log('keyup')
evt.target.value = evt.target.value.replace(/[^\d]/g, '')
// 这里执行顺序靠后 修改无用
},
handerInput (evt) {
let val = evt.target.value.substr(0, 13).replace(/[^\d]/g, '')
console.log('handerInput__val', val)
//这里拿到的val是纯数字
evt.target.value = val
this.txt = val
if (this.txt.length > 0) {
this.showBig = true
}
this.txt2 = this.getStr(this.txt, 4)
},
</script>ログイン後にコピーv-model は実際には糖衣構文ですv-bind:value と v-on:inputrrreee入力を数字に制限しますkeyup のときに数字以外をフィルタリングすることです 🎜しかし実際には、 >keydown->handerInput->keyup🎜🎜その後、keydown を実行します。ただし、keydown の後は evt が変更されます。 target.value では、handerInput から取得した evt.target.value がまだ処理されていないため、keydown での処理は機能しません 🎜 handerInput で処理する必要があります🎜rrreee🎜 関連する推奨事項: 🎜🎜🎜正規表現を使用して、ユーザーが入力した銀行カード番号を確認します (コード付き) 🎜🎜🎜🎜js、jq 銀行カードを確認する方法アカウントコードの共有🎜🎜🎜🎜携帯電話番号、メールアドレス、IDカード、キャッシュカードの定期認証例🎜🎜
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
