23543


以下のようなjavascriptの実装があるのですが、focus()が効いておらずフォーカスが移動しません。  
因みに、focus()の対象を$('#test')のように変更した場合は正常動作しましたので、おそらくfocus対象の指定方法に間違いがあるのだと考えているのですが、どう間違えているのかがわからない状態です。  

[code]

    $('#name').on('keydawn', function(evt) {
      var elem = evt.target;
      elem[0].children[1].children[2].children[0].focus();
      evt.preventDefault();
    });
    
[/code]

解決方法の分かる方がいましたら、ご教授をお願いします。


CC BY-SA 3.0
2016-03-28T08:43:33.403
23538
2016-03-29T00:37:54.897
2016-03-29T00:37:54.897
7626
7626
question
javascript
javascript:focus()が効かない


つまりこういうことでしょうか・・・。

[code]

    $('#test').on('click', function(evt) {
      var elem = $('#test');
      elem[0].children[0].focus();
      evt.preventDefault();
    });
    $('#test2').on('click', function(evt) {
      var elem = evt.target;
      elem[0].children[0].focus();
      evt.preventDefault();
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="test">ここをクリック（jQuery版）<textarea></textarea></div>
    <div id="test2">ここをクリック（evt.target版）<textarea></textarea></div>
[/code]

jQueryで要素を取得した前者の場合 `elem` には **jQueryオブジェクト**
が入るわけですが、これは対象が一つの要素であっても、DOM要素を含んだ配列のような構造になっています。ですから生のDOM要素を使いたければ、`elem[0]`
もしくは `elem.get(0)` として中身を取り出す必要があります。

一方 `evt.target` を使った後者ですが、`evt.target` には **単一のDOM要素**
が入っています。配列でも、jQueryオブジェクトでもありません。ですから `elem[0]`
とすると（0番目の要素がないので）undefinedになってしまいますし、既にDOM要素なのですから `elem.children[...]`
とすることができます。

jQueryオブジェクトとDOMオブジェクトでは扱い方が異なります。自分が扱っているのはどちらなのかを意識して、それぞれに合わせたコードを書く必要があります。


CC BY-SA 3.0
2016-03-28T09:49:21.263
23543
2016-03-28T09:49:21.263
8000
23538
answer