Q&A
再現手順
1：最初にキャンセルしてダイアログを消します。
2：テキストボックスのabcdをバックスペースで消します。→abcになる。
3：最初のkeyupイベントでダイアログがポップアップします。
4：このとき、再びバックスペースを押すと、edgeのみ文字が消え、abになる。さらにバックスペースを押せばaになる。
ダイアログボックスがポップアップ中は、背面のテキストボックスでバックスペースキーが効かないようにするにはどうしたらいいのでしょうか。
テキストボックスのkeyupイベント時に
テキストボックス.blur()を含めても、バックスペースを押すと、テキストボックスの文字が消えます。
あるいは、そのタイミングで、
他の部品.focus()をしても、バックスペースを押すと、テキストボックスの文字が消えます。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQuery UI Dialog - Animation</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#dialog" ).dialog({ width: 400, modal: true, buttons: { OK: function() { $( this ).dialog( "close" ); }, Cancel: function() { $( this ).dialog( "close" ); } } }); $( "#opener" ).on( "keyup", function() { $( "#dialog" ).dialog(); }); } ); </script> </head> <body> <div id="dialog" title="Basic dialog"> <p>これは、ダイアログです。</p> </div> <input id="opener" type="text" value="abcd"> </body> </html>
回答1件
0
ベストアンサー
たしかにedgeの仕様がおかしいですね
姑息ですがdialog内にダミーのinput要素をおいてフォーカスさせてしまうという手もあります
HTML
1<div id="dialog" title="Basic dialog"> 2<p>これは、ダイアログです。</p> 3<input type="text" class="dummy" tabindex="-1" style="position:absolute;top:-999px"> 4</div>
javascript
1 $( "#opener" ).on( "keyup", function() { 2 $( "#dialog" ).dialog(); 3 $( "#dialog .dummy" ).trigger('focus'); 4 });
投稿2019/11/27 01:06
総合スコア116661
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/11/28 13:40