none
javascriptのfocus時にテキストの選択状態が残ってしまいます。 RRS feed

  • 質問

  • テキストボックスにてEnter押下でフォーカスを移動するシステムをJavascriptで構築しているのですが、
    IE11においてフォーカス先がボタン、かつテキスト全選択状態でフォーカス移動(Enter押下)させると
    フォーカスは移動しているのになぜかテキストの選択状態が残ったままになってしまいます。
    (chrome、Firefoxでは発生しませんでした)

    対処方法事態はわかっているのですが、
    そもそもの原因がわからず本フォーラムに記載させていただきました。

    <確認したいこと>
    本事象の原因についてです
    (IEまたはJavascriptの不具合なのか)

    <環境>
    Windows7 32bit
    IE11



    【サンプルプログラム】
    <html>
    <head>
    <script>
    function init() {
    document.getElementById('enter1').focus();
    document.getElementById('enter1').select();
    }
    function foo(o) {
    if (event.keyCode == '13') {
    var nextObj = document.getElementById(o);
    nextObj.focus();
    nextObj.select();
    return false;
    }
    }
    </script>
    </head>
    <body onload="init();">
    <h4>↓Enterを押してください</h4>
    <input type="text" id="enter1" class="enter" value="aaa" onkeydown="foo('enter2');"/>
    <input type="button" id="enter2" class="enter" value="button"/>
    </body>
    </html>
    2016年9月9日 0:47

回答

  • このサンプルで確かに再現は確認できますし、Chrome や Firefox では挙動が異なるのも確認できました。また Edge でも同様の動作でした。

    Enter を押してフォーカスを移動する場合だけでなく、直接 [Button] ボタンをクリックした場合でも、テキストの選択が解除されない/されるの差が IE/Edge と Chrome/FF でありますね。

    良い悪いは別にして Internet Explorer / Edge ではこういう動作のようです。必要であれば、自前で選択解除する処理を入れる必要があるでしょう。


    hebikuzure

    • 回答の候補に設定 星 睦美 2016年9月14日 5:36
    • 回答としてマーク 星 睦美 2016年10月20日 1:25
    2016年9月9日 8:09
    モデレータ

すべての返信

  • このサンプルで確かに再現は確認できますし、Chrome や Firefox では挙動が異なるのも確認できました。また Edge でも同様の動作でした。

    Enter を押してフォーカスを移動する場合だけでなく、直接 [Button] ボタンをクリックした場合でも、テキストの選択が解除されない/されるの差が IE/Edge と Chrome/FF でありますね。

    良い悪いは別にして Internet Explorer / Edge ではこういう動作のようです。必要であれば、自前で選択解除する処理を入れる必要があるでしょう。


    hebikuzure

    • 回答の候補に設定 星 睦美 2016年9月14日 5:36
    • 回答としてマーク 星 睦美 2016年10月20日 1:25
    2016年9月9日 8:09
    モデレータ
  • hebikuzure様

    ご回答ありがとうございます。

    また、返信が遅くなり申し訳ございません。

    hebikuzure様がおっしゃっているようにIEではこういった動作をするものとして

    力技で選択解除の方法を選択するようにしました。

    ご回答ありがとうございました。


    2016年9月14日 5:22