目標

多数の1桁の数値を入力として受け取りたいです。
ユーザーは、多数の1桁の数値を入力する必要があり、1つの数字を打った段階で次の入力にフォーカスして欲しいです。
また、既に数字が入力されているところで、再度数値を打つと上書きされ、次の入力にフォーカスが移らせたいです。

これは、大量の選択肢のアンケートやマーク式試験の回答などを想定してもらえるとよいです。

単純なHTMLでの入力コード

html
1<input type="number" min="0" max="9">
2<input type="number" min="0" max="9">
3<input type="number" min="0" max="9">
4<input type="number" min="0" max="9">
5<input type="number" min="0" max="9">
6<input type="number" min="0" max="9">

min等の属性を使っても、範囲外の数字を入力できてしまい、
即時対処するにはJavaScriptを使う必要があるのではないか、と考えております。
Vue.jsで書いているので、Vue.jsなどを使った実装であればありがたいです。

maxlengthを使って

検索してみると、maxlengthを使ったコードがでてきます。
ただ、上書きするような形でフォーカスできないので、ここを変えれれば出来るのかなと思っています。

【Javascript】入力後に自動で次の入力フォームに移動 - ワカログ -Wakalog-

現状でてきているVue.js v3のコード

下記はVue.js v3で作っていますが、同じ数値が連続して入力できてしまうし、フォーカスが移るところまで実装できてないです。

vue
1<!DOCTYPE html>
2<html>
3
4<head>
5  <title>Answer</title>
6  <meta charset="utf-8">
7</head>
8
9<body>
10  <script src="https://unpkg.com/vue@next"></script>
11
12  <div id="app">
13    <input v-for="(number, index) of numbers"
14           @change="change(number, index)"
15           @input="change(number, index)"
16           type="number"
17           min="0"
18           max="9"
19           v-model="number">
20    </input>
21
22    <div>{{ numbers }}</div>
23  </div>
24
25  <script>
26    const vm = Vue.createApp({
27      data(){
28        return {
29          numbers: new Array(3),
30        }
31      },
32      methods: {
33        change(number, index){
34          this.numbers[index] = parseInt(number) % 10
35        }
36      }
37    })
38    vm.mount('#app')
39  </script>
40</body>
41
42</html>

備考

Vue.jsに限らず、JavaScriptで参考となることがあれば、教えてください。

行動規範の内容に同意します

回答1件

ベストアンサー

おそらく個々のINPUT要素にイベントを張り付けなければならないと思っているだろうが
そういうのはルートで監視する。
キャレットが数字の前にあるとちょっと駄目だけどもう眠い。

js
1
2<input type="number" maxlength="1">
3<input type="number" maxlength="1">
4<input type="number" maxlength="1">
5<input type="number" maxlength="1">
6<input type="number" maxlength="1">
7<input type="number" maxlength="1">
8
9
10<script>
11const
12  filter = e => {
13    if (! e.disabled)
14      if ('number' === e.getAttribute ('type'))
15        if (1 === e.maxLength)
16          return NodeFilter.FILTER_ACCEPT;
17    return NodeFilter.FILTER_SKIP;
18  },
19
20  walker =
21    document.createTreeWalker (document.body, NodeFilter.SHOW_ELEMENT, filter, true),
22
23  handler =
24    event=> {
25      let e = event.target, f;
26      if (filter (e) == NodeFilter.FILTER_ACCEPT)
27        if (e.value = (f = /^.*(\d)/.exec (e.value)) ? f[1]: '')
28          if (walker.currentNode = e, e = walker.nextNode ())
29            e.focus (), e.select();
30    };
31
32document.addEventListener ('input', handler, true);
33
34</script>
35
36