23

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

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

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

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

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

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

前もって感謝します！

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

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（）関数を配置しようとしましたが、機能しません。

4

6 に答える 6

31

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

この素晴らしさの準備ができています..？

フォーカスに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);
}

他の誰かがこれをさらに説明できるか、より良い答えがあれば、気軽にステージに上がってください:-)

于 2010-01-20T05:57:07.470 に答える
3

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

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

$("#recipientsDiv").click(function(e){ ... })
于 2010-01-17T22:11:32.447 に答える
3

'toInput'のtabIndexを0以上に設定します。これは、Chromeの既知のバグです。

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

于 2015-08-17T11:29:27.730 に答える
2

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

多くの場所（ここ、ここ、ここなど）で説明されているように、DOMに自分を追加するなどdocument.createElement()の実際のDOMメソッドを使用してみて、Safariの問題が解決するかどうかを確認してください。input

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

于 2010-01-16T03:13:42.870 に答える
1

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

于 2010-01-15T20:59:34.220 に答える
0

私は最新のクロームリリースで同様の問題を抱えていました、そして私は私のcssにあったことを知りました-以下をリセットしてください

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

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

于 2012-02-11T00:58:36.660 に答える