Vueに入力ボックスを実装し、Enterキーを押して行とフォーカスを追加します

多くの企業の公式ウェブサイトのランディングページにはそのような要件があります。ユーザーがユーザー名を入力した後、キーボードのEnterキーを押して次の行のパスワード入力ボックスに切り替え、カーソルをパスワードボックスの行にフォーカスします。 。この機能は主にフォーカスされています入力ボックスのフォーカスイベントをトリガーすることで実現されます

1.パスワードボックスに注目します（参照値を決定します）

ref属性をpasswordInputとしてパスワードボックスに追加し、ユーザー名入力ボックスのEnterイベントをリッスンし、次のコードを追加すると、パスワードボックスに集中できます。

this.$refs.passwordInput.focus(); 

2. v-forを使用して、各入力に参照を動的に追加します

今、私たちのニーズは変わりました。それはもはや明確な参照値ではありません。Enterキーを押すと、入力ボックスが追加され、新しく追加された入力ボックスにフォーカスが移ります。

[1]配列リスト

  data() {
    return {
      questionList: [
        { question: "" }
      ],
    };
  },

[2] v-forは配列リストをループし、各項目の参照を動的に追加します

  <div v-for="(item, index) in questionList" :key="index">
    <Input v-model="item.question" :ref="`question`" @keyup.enter.native="addRow(index)" />
  </div>

[3]イベントに参加する

配列リストに行を追加し、その行に焦点を合わせます

  methods: {
    addRow(index) {
      // 增加行
      let obj = { question: "" };
      this.quesionList.splice(index + 1, 0, obj);

      // 聚焦
      this.$nextTick(() => {
        this.$refs.question[index + 1].focus();
      });
    }
  }

【4】効果

記事は毎週継続的に更新されます。WeChatで「フロントエンドコレクション 」を検索し て初めて読むと、[ビデオ] [ブック]に返信して、200Gのビデオ資料と30のPDFブック資料を受け取ることができます。

​