vue3で6桁の支払いパスワード入力ボックスを実装する方法-Vue.js-php.cn

ホームページ

ウェブフロントエンド

Vue.js

vue3で6桁の支払いパスワード入力ボックスを実装する方法

王林

May 18, 2023 am 09:40 AM

具体的な要件: お客様情報フォームの操作欄にある「決済パスワード変更」ボタンをクリックすると、6桁の決済パスワード入力ボックスのコンポーネントページにジャンプします。同時に、入力ボックスは暗号文を表示するために必要で、編集できず、ロールバックできず、すぐに表示されます; 6桁に達すると、支払いパスワードを確認するために自動的に入力されます; 支払いパスワードの確認が完了すると、入力ボックスが表示されます。 6桁に達すると、入力された2つのパスワードの整合性が自動的にチェックされ、OKボタンが表示されます。この機能は、顧客がデバイスを使用してパスワードを入力する銀行での使用を目的としており、窓口担当者はパスワードを見ることはできませんが、窓口担当者がパスワードを入力するよう促すことができます。

具体的な質問: 1. 暗号テキストを表示する方法、および各ボックスに 1 桁のみ入力できる方法; 2. 入力ボックスを編集不可および返品不可にする方法; 2. 3. パスワードを 2 回入力した場合の一貫性を確認する方法; 4. ビジネスでキーボードのキーを制限する必要がある場合の対処方法。

vue3で6桁の支払いパスワード入力ボックスを実装する方法

1. コードの概要

6 桁の支払いパスワード入力ボックスコンポーネントを実装するコードは次のとおりです。これをコピーして使用します。直接！

<template>
  <div >
    <!-- 密码输入框 -->
    <div class="input-box" >
      <!-- 输入密码 -->
      <div >{{ "输入密码" }}</div>
      <div class="input-content" @keyup="keyup" @input="inputEvent">
        <input max="9" min="0" maxlength="1" data-index="0" v-model.number="state.input[0]" type="password"
          ref="firstinput" :disabled="state.disabledInput[0]" />
        <input max="9" min="0" maxlength="1" data-index="1" v-model.number="state.input[1]" type="password"
          :disabled="state.disabledInput[1]" />
        <input max="9" min="0" maxlength="1" data-index="2" v-model.number="state.input[2]" type="password"
          :disabled="state.disabledInput[2]" />
        <input max="9" min="0" maxlength="1" data-index="3" v-model.number="state.input[3]" type="password"
          :disabled="state.disabledInput[3]" />
        <input max="9" min="0" maxlength="1" data-index="4" v-model.number="state.input[4]" type="password"
          :disabled="state.disabledInput[4]" />
        <input max="9" min="0" maxlength="1" data-index="5" v-model.number="state.input[5]" type="password"
          :disabled="state.disabledInput[5]" />
      </div>
      <!-- 确认密码 -->
      <div >{{ "确认密码" }}</div>
      <div class="input-content" @keyup="confirmKeyUp" @input="confirmInputEvent">
        <input max="9" min="0" maxlength="1" data-index="0" v-model.number="state.confirmInput[0]" type="password"
          ref="confirmfirstinput" :disabled="state.disabledConfirmInput[0]" />
        <input max="9" min="0" maxlength="1" data-index="1" v-model.number="state.confirmInput[1]" type="password"
          :disabled="state.disabledConfirmInput[1]" />
        <input max="9" min="0" maxlength="1" data-index="2" v-model.number="state.confirmInput[2]" type="password"
          :disabled="state.disabledConfirmInput[2]" />
        <input max="9" min="0" maxlength="1" data-index="3" v-model.number="state.confirmInput[3]" type="password"
          :disabled="state.disabledConfirmInput[3]" />
        <input max="9" min="0" maxlength="1" data-index="4" v-model.number="state.confirmInput[4]" type="password"
          :disabled="state.disabledConfirmInput[4]" />
        <input max="9" min="0" maxlength="1" data-index="5" v-model.number="state.confirmInput[5]" type="password"
          :disabled="state.disabledConfirmInput[5]" />
      </div>
    </div>
    <!-- 按钮 -->
    <div >
      <el-button type="info" :disabled="state.disabledConfirm" @click="reConfirm"
        :class="[state.disabledConfirm ? &#39;noActive&#39; : &#39;active&#39;]">{{ "确定" }}</el-button>
      <el-button type="warning" @click="reset">{{ "重新输入" }}</el-button>
    </div>
    <!-- 提示区 -->
    <div
      >
      <p>{{ state.tipContent }}</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { nextTick, reactive, ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from &#39;element-plus&#39;
const state = reactive({
  // 输入数组
  input: ["", "", "", "", "", ""],
  // 确认输入数组
  confirmInput: ["", "", "", "", "", ""],
  // 存放粘贴进来的数字
  pasteResult: [],
  confirmPasteResult: [],
  // 一上来禁用确定按钮
  disabledConfirm: true,
  // 输入框是否禁用
  disabledInput: [false, false, false, false, false, false],
  disabledConfirmInput: [false, false, false, false, false, false],
  // 提示内容
  tipContent: "请告知客户输入6位数字密码，输入完毕后，点击回车确认。"
})
// 获取第一个元素的ref
const firstinput = ref()
const confirmfirstinput = ref()
// 页面一加载就使第一个框聚焦
onMounted(() => {
  // 等待dom渲染完成，在执行focus,否则无法获取到焦点
  nextTick(() => {
    firstinput.value.focus();
  });
})
// @input的处理方法
// 解决一个输入框输入多个字符
const inputEvent = (e) => {
  var index = e.target.dataset.index * 1;
  var el = e.target;
  // 限制只能输入数字
  el.value = el.value.replace(/[^\d]/g, "");
  if (el.value.length >= 1) {
    // 密文显示、不可编辑、不可回退、即时显示
    state.disabledInput[index] = true;
    if (el.nextElementSibling) {
      el.nextElementSibling.focus();
    }
  }
  // 到达6位数，自动进入确认支付密码
  if (!el.nextElementSibling) {
    confirmfirstinput.value.focus();
    state.tipContent = "请告知客户再次输入6位数字密码，输入完毕后，点击回车确认。";
  }
}
// @keydown的处理方法，根据业务需要添加
// 此示例没有使用
const keydown = (e) => {
  var index = e.target.dataset.index * 1;
  var el = e.target;
  // 回退键
  if (e.key === &#39;Backspace&#39;) {
    if (state.input[index].length > 0) {
      state.input[index] = &#39;&#39;
    } else {
      if (el.previousElementSibling) {
        el.previousElementSibling.focus()
        state.input[index - 1] = &#39;&#39;
      }
    }
  }
  // 删除键 
  else if (e.key === &#39;Delete&#39;) {
    if (state.input[index].length > 0) {
      state.input[index] = &#39;&#39;
    } else {
      if (el.nextElementSibling) {
        state.input[1] = &#39;&#39;
      }
    }
    if (el.nextElementSibling) {
      el.nextElementSibling.focus()
    }
  }
  // 左键
  else if (e.key === &#39;ArrowLeft&#39;) {
    if (el.previousElementSibling) {
      el.previousElementSibling.focus()
    }
  }
  // 右键 
  else if (e.key === &#39;ArrowRight&#39;) {
    if (el.nextElementSibling) {
      el.nextElementSibling.focus()
    }
  }
  // 上键 
  else if (e.key === &#39;ArrowUp&#39;) {
    if (Number(state.input[index]) * 1 < 9) {
      state.input[index] = (Number(state.input[index]) * 1 + 1).toString()
    }
  }
  // 下键  
  else if (e.key === &#39;ArrowDown&#39;) {
    if (Number(state.input[index]) * 1 > 0) {
      state.input[index] = (Number(state.input[index]) * 1 - 1).toString()
    }
  }
}
// @keyup的处理方法
const keyup = (e) => {
  var index = e.target.dataset.index * 1;
  // 如果为最后一个框，则输入框全部失焦
  if (index === 5) {
    if (state.input.join("").length === 6) {
      document.activeElement.blur();
    }
  }
}
// @input的处理方法
// 解决一个输入框输入多个字符
const confirmInputEvent = (e) => {
  var index = e.target.dataset.index * 1;
  var el = e.target;
  if (el.value.length >= 1) {
    // 密文显示、不可编辑、不可回退、即时显示
    state.disabledConfirmInput[index] = true;
    if (el.nextElementSibling) {
      el.nextElementSibling.focus();
    }
  }
  // 到达6位数，自动检验两次输入密码的一致性
  if (!el.nextElementSibling) {
    // 一一比较元素值，有一个不相等就不等
    for (let i = 0; i < state.input.length; i++) {
      if (state.input[i] !== state.confirmInput[i]) {
        state.tipContent = "请告知客户两次密码输入不一致，柜员点击重新输入，清空密码后请告知客户重新输入。";
        return;
      }
    }
    state.tipContent = "密码合规，点击确定按钮进行修改。";
    // 确定按钮变为可用
    state.disabledConfirm = false;
  }
}
// @keydown的处理方法，根据业务需要添加
// 此示例没有使用
const confirmKeydown = (e) => {
  var index = e.target.dataset.index * 1;
  var el = e.target;
  // 回退键
  if (e.key === &#39;Backspace&#39;) {
    if (state.confirmInput[index].length > 0) {
      state.confirmInput[index] = &#39;&#39;
    } else {
      if (el.previousElementSibling) {
        el.previousElementSibling.focus()
        state.confirmInput[index - 1] = &#39;&#39;
      }
    }
  }
  // 删除键 
  else if (e.key === &#39;Delete&#39;) {
    if (state.confirmInput[index].length > 0) {
      state.confirmInput[index] = &#39;&#39;
    } else {
      if (el.nextElementSibling) {
        state.confirmInput[1] = &#39;&#39;
      }
    }
    if (el.nextElementSibling) {
      el.nextElementSibling.focus()
    }
  }
  // 左键
  else if (e.key === &#39;ArrowLeft&#39;) {
    if (el.previousElementSibling) {
      el.previousElementSibling.focus()
    }
  }
  // 右键 
  else if (e.key === &#39;ArrowRight&#39;) {
    if (el.nextElementSibling) {
      el.nextElementSibling.focus()
    }
  }
  // 上键 
  else if (e.key === &#39;ArrowUp&#39;) {
    if (Number(state.confirmInput[index]) * 1 < 9) {
      state.confirmInput[index] = (Number(state.confirmInput[index]) * 1 + 1).toString()
    }
  }
  // 下键  
  else if (e.key === &#39;ArrowDown&#39;) {
    if (Number(state.confirmInput[index]) * 1 > 0) {
      state.confirmInput[index] = (Number(state.confirmInput[index]) * 1 - 1).toString()
    }
  }
}
// @keyup的处理方法
const confirmKeyUp = (e) => {
  var index = e.target.dataset.index * 1;
  // 如果为最后一个框，则输入框全部失焦
  if (index === 5) {
    if (state.confirmInput.join("").length === 6) {
      document.activeElement.blur();
    }
  }
}
// 重新输入
const reset = () => {
  state.disabledConfirm = true;
  state.tipContent = "请告知客户输入6位数字密码，输入完毕后，点击回车确认。";
  state.input = ["", "", "", "", "", ""];
  state.confirmInput = ["", "", "", "", "", ""];
  state.disabledInput = [false, false, false, false, false, false];
  state.disabledConfirmInput = [false, false, false, false, false, false];
  // 等待dom渲染完成，在执行focus,否则无法获取到焦点
  nextTick(() => {
    firstinput.value.focus();
  });
}
// 确认修改
const reConfirm = () => {
  ElMessageBox.confirm(
    &#39;是否确定修改?&#39;,
    &#39;温馨提示&#39;,
    {
      confirmButtonText: &#39;确定&#39;,
      cancelButtonText: &#39;取消&#39;,
      type: &#39;warning&#39;,
    }
  )
    .then(() => {
      // 此处调修改支付密码接口
      ElMessage({
        type: &#39;success&#39;,
        message: &#39;修改成功!&#39;,
      })
    })
    .catch(() => {
      ElMessage({
        type: &#39;info&#39;,
        message: &#39;已取消修改!&#39;,
      })
    })
}
</script>
<style lang="scss" scoped>
.input-box {
  .input-content {
    width: 512px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    input {
      color: inherit;
      font-family: inherit;
      border: 0;
      outline: 0;
      border-bottom: 1px solid #919191;
      height: 60px;
      width: 60px;
      font-size: 44px;
      text-align: center;
    }
  }
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
  }
}
.noActive {
  color: #fff !important;
  border-width: 0px !important;
  background-color: #ccc !important;
}
.active {
  color: #fff !important;
  border-width: 0px !important;
  background-color: #67c23a !important;
}
</style>

2. 問題分析

1. 質問: 各ボックスに 1 桁しか入力できない暗号テキストを表示するにはどうすればよいですか?

暗号文を入力したい場合は、入力ボックスの種類を「パスワード」に設定するだけです。各ボックスに 1 桁しか入力できないことを実現するには、入力ボックスの maxlength 属性だけを使用する効果は完全ではなく、制限できない状況が発生する可能性があります。現在の要素値の長さを判断する必要があります。 @input イベント。それが 1 より大きい場合、nextElementSibling.focus() を使用してカーソルを次の兄弟要素にフォーカスします。

2. 質問: 入力ボックスを編集不可および返品不可にするにはどうすればよいですか?

回答: 入力ボックスのdisabled属性を使用します @inputイベントで、現在のinput要素のdisabled属性をtrueに変更できます。その後の取得と変更を容易にするために、入力ボックスの無効な属性値を配列に格納します。

3. 質問: 2 回入力したパスワードの一貫性を確認するにはどうすればよいですか?

回答: 最も単純な for ループは、入力パスワード配列と確認パスワード配列を走査し、それらの要素の値を 1 つずつ比較し、一方が等しくない場合は等しくなく、処理を終了するために使用されます。 return による関数全体の実行。

4. 質問: ビジネスでキーボードのキーを制限する必要がある場合はどうすればよいですか?

回答: @keydown または @keyup イベントを入力ボックスに追加し、コールバック内のキーを判断することで、さまざまなキーに対してビジネス処理を実行できます。

以上がvue3で6桁の支払いパスワード入力ボックスを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事は亿速云で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

React vs. Vue：Netflixはどのフレームワークを使用していますか？Apr 14, 2025 am 12:19 AM

netflixusesaCustomframeworkは、「ギボン」ビルトンリアクト、notreactorvuedirectly.1）チームエクスペリエンス：seice basedonfamperivity.2）projectomplerprojects：vueforsplerprojects、racefforcomplexones.3）customeforsneeds：reactofforsmorefloficailie.

フレームワークの選択：Netflixの決定を推進するものは何ですか？Apr 13, 2025 am 12:05 AM

Netflixは、主に、パフォーマンス、スケーラビリティ、開発効率、エコシステム、技術的な負債、およびフレームワーク選択におけるメンテナンスコストを考慮しています。 1。パフォーマンスとスケーラビリティ：JavaとSpringbootが選択され、大規模なデータと高い同時リクエストを効率的に処理します。 2。開発効率とエコシステム：Reactを使用して、フロントエンド開発効率を向上させ、その豊富なエコシステムを利用します。 3.技術的な負債とメンテナンスコスト：node.jsを選択してマイクロサービスを構築して、メンテナンスコストと技術的債務を削減します。

Netflixのフロントエンドの反応、Vue、および未来Apr 12, 2025 am 12:12 AM

Netflixは、主にReactをフロントエンドフレームワークとして使用し、特定の機能のためにVUEによって補足されます。 1）Reactのコンポーネント化と仮想DOMは、Netflixアプリケーションのパフォーマンスと開発効率を向上させます。 2）VueはNetflixの内部ツールと小規模プロジェクトで使用されており、その柔軟性と使いやすさが重要です。

フロントエンドのvue.js：実際のアプリケーションと例Apr 11, 2025 am 12:12 AM

Vue.jsは、複雑なユーザーインターフェイスを構築するのに適した進歩的なJavaScriptフレームワークです。 1）そのコア概念には、レスポンシブデータ、コンポーネント、仮想DOMが含まれます。 2）実際のアプリケーションでは、TODOアプリケーションを構築し、Vuerouterを統合することで実証できます。 3）デバッグするときは、vuedevtools and Console.logを使用することをお勧めします。 4）パフォーマンスの最適化は、V-IF/V-Show、リストレンダリング最適化、コンポーネントの非同期負荷などを通じて達成できます。

Vue.jsとReact：重要な違いを理解するApr 10, 2025 am 09:26 AM

Vue.JSは中小企業から中規模のプロジェクトに適していますが、Reactは大規模で複雑なアプリケーションにより適しています。 1。VUE.JSのレスポンシブシステムは、依存関係追跡を介してDOMを自動的に更新し、データの変更を簡単に管理できるようにします。 2.反応は一方向のデータフローを採用し、データは親コンポーネントから子コンポーネントに流れ、明確なデータフローと簡単な抽出構造を提供します。

Vue.js vs. React：プロジェクト固有の考慮事項Apr 09, 2025 am 12:01 AM

VUE.JSは、中小規模のプロジェクトや迅速な反復に適していますが、Reactは大規模で複雑なアプリケーションに適しています。 1）Vue.jsは使いやすく、チームが不十分な状況やプロジェクトスケールが小さい状況に適しています。 2）Reactにはより豊富なエコシステムがあり、高性能で複雑な機能的ニーズを持つプロジェクトに適しています。

Vueにタグをジャンプする方法Apr 08, 2025 am 09:24 AM

VUEでタグのジャンプを実装する方法には、HTMLテンプレートでAタグを使用してHREF属性を指定する方法が含まれます。 VUEルーティングのルーターリンクコンポーネントを使用します。 JavaScriptでこれを使用します。$ router.push（）メソッド。パラメーターはクエリパラメーターに渡すことができ、ルートは動的ジャンプのルーターオプションで構成されています。

VUEのコンポーネントジャンプを実装する方法Apr 08, 2025 am 09:21 AM

VUEでコンポーネントジャンプを実装するための次の方法があります。Router-Linkと＆lt; router-view＆gt;を使用してください。ハイパーリンクジャンプを実行し、ターゲットパスとして属性を指定するコンポーネント。＆lt; router-view＆gt;を使用してください現在ルーティングされているレンダリングされているコンポーネントを表示するコンポーネント。プログラマティックナビゲーションには、router.push（）およびrouter.replace（）メソッドを使用します。前者は歴史を保存し、後者は記録を残さずに現在のルートに取って代わります。

See all articles