web-dev-qa-db-ja.com

focus（）がサファリまたはchrome

Tabindexが指定されたdivがあります。divがフォーカスされている（クリックまたはタブで移動される）と、次のようになります。

それ自体に入力を挿入し、入力にフォーカスを与えます

これはFF、IEおよびOperaでうまく機能します

しかし、Chome/Safariでは、入力フォーカスを提供しますが、実際にカーソルを入力内に置くことができません（Safari/chromeフォーカスの境界が表示されるため、フォーカスを提供することはわかっています）。

何が起こっているかについての提案はありますか？

矢印キーとバックスペースキーも機能するように、この後にキーハンドラーを修正する必要があります。必要に応じて、自由に操作してください。

前もって感謝します！

コードのサンプルは次のとおりです。

var recipientDomElem = $("#recipientsDiv");
recipientDomElem[0].tabIndex = 0;
$("#recipientsDiv").focus(function(e){
var code = (e.keyCode ? e.keyCode : e.which);
window.clearTimeout(statusTimer);
recipientDivHandler(code, null);
});


function recipientDivHandler(code, element){
$("#recipientsDiv").append('<input type="text" id="toInput" class="inlineBlockElement rightSpacer" style="border:0px none #ffffff; padding:0px; width:40px;margin-bottom:3px;padding:0; overflow:hidden; font-size:11px;" />');
$("#toInput").focus();
}

これに関するもう1つの奇妙な点は、divまでタブ移動するとdiv.focus（）関数が呼び出され、入力フォーカスが正しく与えられることです...失敗するのはクリックだけです。 divに.click（）関数を配置して、フォーカスと同じことを実行しようとしましたが、機能しません。

javascriptjqueryfocuskeystrokedynamic-forms
21
BinarySolo00100

私は自分で答えを得ました、それは弱いように見えるかもしれません、そして単純すぎるが、それはうまくいきます。

この素晴らしさの準備はできましたか？

フォーカスに0のタイマーを追加するだけです...何らかの理由で、DOMに入力を完全にロードするのに十分な時間が与えられます。

function recipientDivHandler(code, element) {
  $("#recipientsDiv").append('<input type="text" id="toInput" class="inlineBlockElement rightSpacer" style="border:0px none #ffffff; padding:0px; width:40px;margin-bottom:3px;padding:0; overflow:hidden; font-size:11px;" />');
  setTimeout(function() {
    $("#toInput").focus();
  }, 0);
}

他の誰かがこれをさらに説明できるか、より良い答えを持っている場合は、ステージに進んでください:-)

24
BinarySolo00100

これを具体的に述べた場所はどこにもありませんでしたが、.focus()は入力要素とリンクでのみ機能します。また、ChromeおよびSafariでは適切にサポートされていません。 ここのデモ を投稿して、私が何を意味するかを示します。また、focus()に注意してくださいとfocusin()（v1.4）は同じ結果になります。

決定されるように、関数を.click()に変更してみてください

$("#recipientsDiv").click(function(e){ ... })
3
Mottie

'toInput'のtabIndexを0以上に設定すると、既知のChromeバグ：

http://code.google.com/p/chromium/issues/detail?id=46704

3
xamiro

問題は、DOMオブジェクトを追加しておらず、明示的なHTMLをページに追加している可能性があります。また、Safariが舞台裏でDOMを更新しているのではないかと思います。

多くの場所（ here または here または here など）で説明されているように、document.createElement()のような実際のDOMメソッドを使用してinputをDOMに追加してみてください）、Safariの問題が引き続き発生するかどうかを確認します。

そうは言っても、発生した問題を説明する方法（たとえば、クリックではなくタブで）は、問題はこれではないと主張します...だから私は興味があります。 （いずれにしても、DOMメソッドを使用することは要素を追加するための正しい方法であるため、とにかくそれを行うことは悪い考えではありません。）

2
delfuego

html 4.01標準 によると、tabindexはdivには適用されません。

1
user213154

最新のchrome=リリースで同様の問題が発生し、css-resetで次のようになっていることがわかりました

-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-o-user-select: none; 
user-select: none;

その結果、chromeでテキストを入力することさえできませんでした... Firefoxでそれは可能でした

0
Master Yogurt