Q&A
ご回答ありがとうございます。
イベント発行でTabキー押下の動作を再現するのは不可能なのですね…。
自前でなんとか実装してみます。ありがとうございました。
初めて質問させていただきます。
現在作成中のWebサイトでIE8以前・IE9以降で同様の動作になるよう
作成中なのですが、表題の部分で詰まってしまいました。
問題は<input>タグのtype="text"もしくはtype="radio"上(以下「入力項目」と表記)で
Enterキーを押下時することで、Tabキーを押下した時と同様に
次の入力項目にフォーカスが移動する処理を行うJavaScriptです。
現在、下記のように作成しましたが動作していません。
//フォーカス遷移(入力項目からonkeydownで呼ばれる)
function hoge() {
key = event.keyCode;
//Enterキー判別
if (key == 13) {
nextFocus(event);
}
}
function nextFocus(e) {
if (document.createEvent) {
//IE9以降
var ev = document.createEvent("KeyboardEvent");
ev.initKeyboardEvent('keypress', true, true, null, false, false, false, false, 9, 0 );
document.activeElement.dispatchEvent(ev);
}else{
//IE8以前
e.keyCode = 9;
}
}
alert()を入れて確認したところ、IEのバージョン判別部は動作しており
IE8ではフォーカス移動が行われていますが、IE9以降(確認環境はIE11)では
フォーカス移動が行われません。また、JavaScriptエラーも発生しません。
initKeyboardEventにはkeypressだけではなく、keydownとkeyupも試してみましたが
いずれも同様に動作しませんでした。
また、document.activeElement.dispatchEvent()をe.target.dispatchEvent()に
変更しても駄目でした。
恥ずかしながら、自分ではお手上げ状態です。
何が悪いのかご教示いただけないでしょうか。
回答4件
0
ベストアンサー
input要素とselect要素に対してフォーカス移動を行い、
disabledとreadonlyが設定されている要素は対象外ということですかね。
フォーカス移動先のセレクタでdisabledとreadonlyを対象外にしました。
ちなみにselect要素にreadonlyはありませんので注意。
JavaScript
1<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 2<script type="text/javascript"> 3 $(window).load(function() { 4 $('input,select').on('keypress', function(ev){ 5 var $me = $(this); 6 var $list = $('input:enabled:not([readonly]),select:enabled'); 7 if (ev.keyCode == 13) { 8 $list.each(function(index){ 9 if ($(this).is($me)) { 10 $list.eq(index+1).focus(); 11 ev.preventDefault(); 12 } 13 }); 14 } 15 }); 16 }); 17</script>
投稿2015/08/06 07:02
退会済みユーザー
総合スコア0
0
dispatchEvent() はイベントは発行しますが、それに付随するデフォルトアクションまでは実行しません。
従って、[Tab] キーの keypress を発行してもフォーカス移動は発生しません。
結論としては自前で次のフォーカス先要素ノードを探す必要があります。
HTML5 でフォーカス移動先のアルゴリズムは標準化されているので参考にしてみるといいかもしれません。
簡易実装にするなら全てのフォーカス可能な部品に1ずつ加算したtabindex属性を付与してフォーカス移動する方法もあります。
http://momdo.github.io/html5/editing.html#focus
https://html.spec.whatwg.org/.w3c-html-core/editing.html#focus
投稿2015/08/06 06:22
総合スコア18162
0
jQueryを使っても良いならこんな感じでも良さそうな気がします。
「input要素のtext全て」にkeypressのイベントを設定して
エンターキーが押されたら「input要素のtext全て」から自分を見つけて
その次の要素にフォーカスを当てます。
状況に応じて$('input[type="text"]')のセレクタを変更すれば良いと思います。
javascript
1 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 2 <script type="text/javascript"> 3 $(window).load(function() { 4 $('input[type="text"]').on('keypress', function(){ 5 var $me = $(this); 6 var $list = $('input[type="text"]'); 7 if (event.keyCode == 13) { 8 $list.each(function(index){ 9 if ($(this).is($me)) { 10 $list.eq(index+1).focus(); 11 return false; 12 } 13 }); 14 } 15 }); 16 }); 17 </script>
投稿2015/08/06 05:06
退会済みユーザー
総合スコア0
回答ありがとうございます。
jQueryを使用して良いかは確認を取らねばわかりませんが、
理想に近い動作にすることができました。ありがとうございます。
上記コードを改変して、inputもしくはselect要素(select要素にもEnter押下でフォーカス移動が有りました…)時の
keypressイベントとし、更に「次の項目がDisabledもしくはreadOnryの場合」に
インデックスをカウントアップするwhile文を追加してみました。
すると
1.フォーカスがinputにある場合には動作するがselectにある場合は動作しない
2.次項目判定でreadOnlyの判別ができていない
という問題に当たりました。
```JavaScript
$(window).load(function() {
$('input,select').on('keypress', function(){
var $me = $(this);
var $list = $('input,select');
var komokuIndex;
if (event.keyCode == 13) {
$list.each(function(index){
if ($(this).is($me)) {
komokuIndex = index + 1;
while($list.eq(komokuIndex).is(':disabled') || $list.eq(komokuIndex).readOnly === true){
komokuIndex++;
}
$list.eq(komokuIndex).focus();
return false;
}
});
}
});
});
```
最初のkeypressイベントの設定とwhile文の条件式に誤りがあると思うのですが
自力では解決できませんでした。
よろしければ解決方法をご教示いただけないでしょうか。
0
解決の方向性が異なりますが以下のような処理ではだめでしょうか？
(以下の例はとりあえず動かすために書いた酷いコードですので念のため)
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6</head> 7<body> 8<form id="form_wrapper"> 9<input type="text" name="user_name"> 10<input type="text" name="user_mail"> 11<input type="text" name="user_id"> 12</form> 13<script type="text/javascript"> 14form_wrapper.user_name.onkeypress=function (e) { 15 if(e.keyCode==13){ 16 form_wrapper.user_mail.focus(); 17 } 18} 19</script> 20</body> 21</html>
form.input_name.focus()という形でフォーカスを移すことができます。
ですからまずはinput要素にその次(兄弟要素)のinput要素を取得してfocusを移すような処理を作成。
その処理をページロード時に各input要素に対してイベントとしてセットすればいいのではないですかね。
(ここでは使い回しが利かないような例を出しましたが、input要素の数や名前などを問わずループで設定していくような設計にしておきたいですね)
投稿2015/08/06 03:13
総合スコア730
回答ありがとうございます。
申し訳ないですが、今回のケースでは上記コードだと解決が難しそうです。
情報提示が不足しておりましたが、現在作成中のページはinput要素が数十ありますが
ラジオボタンやテキストの値に応じて項目の表示/非表示やEnabled/Disabledが
切り替わる構造になっており、常に同じ要素にフォーカス移動するという訳ではありません。
また、Enter押下時に別処理を実行した後にフォーカス移動する項目もいくつかあるため
各要素にイベントとしてセットしておく方法は難しいと思われます。
申し訳ありません。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/06 08:00
2015/08/06 08:36