Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
WEBページで入力項目を登録するときに、どうしても利用者がエンターキーで次項目に行こうとします。しかし、inputタグでsubmitを使っていると登録不十分で進んでしまいます。
そこで、requiredを使ってみましたが、入力任意のところが必須項目になるとという別の問題が発生しました。
そこで、JavaScriptを使えば改善できると聞きテストをしています。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>Sample</title> 6<script language="javascript" type="text/javascript"> 7function keydown(e){ 8 if(e.keyCode === 13){ 9 var obj = document.activeElement; 10 obj.nextElementSibling.focus(); 11 } 12} 13 14window.onkeydown = keydown; 15</script> 16</head> 17<body> 18<form action='test2.htm'> 19 <input type='text' /> 20 <input type='text' /> 21 <input type='text' /> 22<!-- <input type='text' name='dummy' style='display:none;' /> --> 23<!-- <input type="button" value="送信" onclick="location.href='test2.htm'"> --> 24<!-- <button type='submit'>送信</button> --> 25<input type='button' onclick='submit();' value='送信'> 26</form> 27</body> 28</html>
これでいくと3項目目まではエンターキーを押しても次の入力項目へ行くだけですが、3項目目を入力しエンターキーを押すとボタンまで押してしまい、3項目目入力即位道となってしまいます。
3項目目のエンターはボタンまでの移動として、ボタンにフォーカスがある場合は、エンターもしくはシフトでボタンを押すという風にしたいと考えています。
よくある話とは思うのですが、どのページも途中までの情報でなかなかうまくいきません。
できれば今回はJavaScriptで完結したいと考えています。よろしくお願い致します。
回答1件
0
ベストアンサー
たとえばこんな感じで
投稿2020/08/24 06:53
総合スコア116724
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('form *').forEach(x=>{
x.addEventListener('keydown',(e)=>{
if(e.keyCode === 13){
var obj = e.target;
if(e.shiftKey==true){
obj.previousElementSibling.focus();
}else{
obj.nextElementSibling.focus();
}
e.preventDefault();
}
});
});
});
submitボタン上のキーダウンとかどうするとか
１周回った場合どうするとか、課題はいろいろあります
ありがとうございました。
見るからに私の知識を十二分に超えるものでした。
1行ずつ勉強させて頂きます。
しかし、この構文のおかげで仕事がはかどります。わからず使うのは応用が利きませんが、助かりました。
あなたの回答
tips
プレビュー
