0

私のアプリケーションには、ユーザーがコメントボックスに入力しているときの先行入力機能が含まれています。Facebookやgoogle+と同様に、ユーザーの検索を実行し、その場でタグとして提案します。

ユーザーが提供されたタグの1つを選択すると、そのタグは要素として入力領域に入力されます。

これにはconenteditabledivを使用することにしましたが、いくつかの問題が発生しました。

他のすべての主要なブラウザが削除するのに対し、Firefoxはcontenteditable falseに設定されている場合、挿入された要素を削除しないことがわかりました。

これを回避するために、挿入された'user'タグをcontenteditble= trueとして設定し、この問題を解決するための簡単なjquery回避策を作成しました。

これは、1つの大きな問題を除けば完全に機能します。エリアに複数のタグがあり、最初のタグの前にテキストがない場合、ユーザーが最後のタグを削除すると（右から左にバックスペースキーを使用して削除すると仮定）、最後の削除に続いてカレットが正しく配置されません。

もう一度入力すると、位置が通常に戻るように見えます。

この問題はFirefoxでのみ発生します

これが問題を示すjsFiddleです：

http://jsfiddle.net/gordyr/PESky/

最後のタグの最後にカーソルを置き、すべての要素が削除されるまでバックスペースキーを押し続けます。カーソル/キャレットが上下に移動して位置がずれていることがわかります。

これは実際にはFirefox自体のバグである可能性がありますが、javascriptを使用したこの自動要素削除がないと、まったく削除されないため、何らかの回避策を探しています。

どうもありがとう

4

1 に答える 1

2

FFは汚れを残しているようですが、次のように追加することでクリーンアップできます。

if (!$.trim(el.text())) {
    el.empty();
}

これにより、contenteditableのinnerTextにスペースまたは改行/区切りのみが含まれているかどうかがチェックされます。含まれている場合は、空にします。私のテストでは機能しているようです：http：//jsfiddle.net/cBZ7k/

補足：おそらく、Webkitサポートkeydownの代わりに使用する必要があります。keypressまた、e.whichkeyCodeを取得するには十分ですが、jQueryはこのイベントプロパティを正規化します。

于 2012-10-03T21:18:23.230 に答える