###前提・実現したいこと
数字を1桁入力したらフォーカスが移動し、選択状態になってくれれば良いのですが、
御覧の通りJavaScript文が長いです。
何かもっと、上手い書き方があるのではないでしょうか。
###該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>数当てゲーム</title> 6</head> 7<body> 8 <div>4つの数字入力をどうぞ</div> 9 <input type="number" id="kai1" min="0" max="9" value="0" autofocus /> 10 <input type="number" id="kai2" min="0" max="9" value="0" /> 11 <input type="number" id="kai3" min="0" max="9" value="0" /> 12 <input type="number" id="kai4" min="0" max="9" value="0" /> 13 <input type="button" id="kaiket" value="決定" /><br /> 14 <div id="hyouji">表示</div> 15 16 <script src="main.js"></script> 17</body> 18</html>
JavaScript
1{ 2 'use strict'; 3document.addEventListener('DOMContentLoaded',function(){ 4 let kai1 = document.getElementById('kai1'); 5 let kai2 = document.getElementById('kai2'); 6 let kai3 = document.getElementById('kai3'); 7 let kai4 = document.getElementById('kai4'); 8 let kaiket = document.getElementById('kaiket'); 9 let hyouji = document.getElementById('hyouji'); 10 11kai1.addEventListener('focus',function(){ 12 kai1.select();}) 13kai2.addEventListener('focus',function(){ 14 kai2.select();}) 15kai3.addEventListener('focus',function(){ 16 kai3.select();}) 17kai4.addEventListener('focus',function(){ 18 kai4.select();}) 19 20kai1.addEventListener('keyup',function(evt){ 21 let kc = evt.keyCode; 22 if (kc>=96 && kc<=105){ //テンキーの0~9が押されたら、適当な処理をしつつ 23 hyouji.textContent = "キーコード:"+kc+"が押されました"; 24 kai2.focus();} //次のinputへフォーカスを移す 25}) 26kai2.addEventListener('keyup',function(evt){ 27 let kc = evt.keyCode; 28 if (kc>=96 && kc<=105){ //テンキーの0~9が押されたら以下同文 29 hyouji.textContent = "キーコード:"+kc+"が押されました"; 30 kai3.focus();} 31}) 32kai3.addEventListener('keyup',function(evt){ 33 let kc = evt.keyCode; 34 if (kc>=96 && kc<=105){ //テンキーの0~9が押されたら以下同文 35 hyouji.textContent = "キーコード:"+kc+"が押されました"; 36 kai4.focus();} 37}) 38kai4.addEventListener('keyup',function(evt){ 39 let kc = evt.keyCode; 40 if (kc>=96 && kc<=105){ //テンキーの0~9が押されたら以下同文 41 hyouji.textContent = "キーコード:"+kc+"が押されました"; 42 kaiket.focus();} 43}) 44kaiket.addEventListener('click',function(){ //決定ボタンでひとまず終了 45 hyouji.textContent = "お終い";} 46) 47},false); 48} 49
###試したこと
name属性やclass属性を追加すれば良いのかなぁ・・
配列みたいな考え方で書く方法があるのかなぁ・・
と思って試したのですが、上手く出来ませんでした。
よろしくお願いします。
###補足情報(言語/FW/ツール等のバージョンなど)
chromeで動いてくれればOKです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/16 04:41