質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
Internet Explorer 9

Windows Internet Explorer 9は2011年3月14日にリリースされたMicrosoftで開発されたウェブブラウザのことを指しますWindows Vista SP2以上, Windows Phone 7.1 / 8、Xbox360で使うことができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

4回答

39622閲覧

IE9以降でEnterキー押下時にTabキーと同様のフォーカス移動を行うスクリプト

fango

総合スコア20

Internet Explorer 9

Windows Internet Explorer 9は2011年3月14日にリリースされたMicrosoftで開発されたウェブブラウザのことを指しますWindows Vista SP2以上, Windows Phone 7.1 / 8、Xbox360で使うことができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

3クリップ

投稿2015/08/06 02:30

初めて質問させていただきます。
現在作成中の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()に
変更しても駄目でした。

恥ずかしながら、自分ではお手上げ状態です。
何が悪いのかご教示いただけないでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fango

2015/08/06 08:00

コードの記載ありがとうございます。大変助かります。 上記コードを試したところ、 ・ラジオボタンにフォーカスが移らない($listに格納されていない?) ・select上でEnterを押下してもフォーカスが移動しない という現象が発生しました。(それ以外は希望通りの動作となりました!) 調査を進めてみますが、もし何か心当たり等ありましたら教えていただけないでしょうか。 よろしくお願いします。
fango

2015/08/06 08:36

失礼しました、上記の件は自己解決しました。 特定のinput要素でonkeydownイベント実行時に 次の入力フォーム部のソースコードを生成する仕組みになっていたため、 load時点では要素自体が存在しておらずkeypressイベントの関連付けが行われていませんでした。 お騒がせしました。
guest

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

think49

総合スコア18170

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fango

2015/08/06 07:16

ご回答ありがとうございます。 イベント発行でTabキー押下の動作を再現するのは不可能なのですね…。 自前でなんとか実装してみます。ありがとうございました。
guest

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fango

2015/08/06 06:22

回答ありがとうございます。 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文の条件式に誤りがあると思うのですが 自力では解決できませんでした。 よろしければ解決方法をご教示いただけないでしょうか。
guest

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

Cf_cwd

総合スコア730

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fango

2015/08/06 04:35

回答ありがとうございます。 申し訳ないですが、今回のケースでは上記コードだと解決が難しそうです。 情報提示が不足しておりましたが、現在作成中のページはinput要素が数十ありますが ラジオボタンやテキストの値に応じて項目の表示/非表示やEnabled/Disabledが 切り替わる構造になっており、常に同じ要素にフォーカス移動するという訳ではありません。 また、Enter押下時に別処理を実行した後にフォーカス移動する項目もいくつかあるため 各要素にイベントとしてセットしておく方法は難しいと思われます。 申し訳ありません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問