7

contenteditable="true"属性を含む動的に生成された要素で、Firefox (他のブラウザーは正常に動作するようです) で問題が発生しています。

(動的にselectAll、またはマウスを使って) すると、Firefox はキーボード入力を許可しません。

私のjsFiddle Exampleを参照してください。これは Firefox にのみ影響するようです。

$(document).ready(function(){
$('.edit').live('dblclick', function () {
    document.execCommand('selectAll',false,null);
});

$('#live').append('<p class="edit" contenteditable="true">This content is generated. Firefox will not allow keyboard input when "ALL" is selected.</p>');
});

編集: これが私が取り組んでいる実際のアプリです (ほこりを許してください): cr8.me/app/ff.html - 私が望んでいるのは、メモ、カテゴリ、またはプランのタイトルをクリックして編集します。それは誰にとってもうまくいきますか？たぶん、それは私の構成、またはスクリプトの作成が不十分なだけです。行 137、572 が該当します。

4

1 に答える 1

7

どうやら Firefox には、 span要素のcontenteditable に問題があるようです (テストはしていませんが、他のディスプレイ: インライン要素にも当てはまると思います)。span を div に置き換えるだけで問題を解決できます。さらに、css を使用して div に「display: inline」プロパティを設定しても、正常に動作することができます。

ここで実際の例を確認してください: http://jsfiddle.net/6sTJh/5/。「Add buggy」というラベルの付いたボタンは contenteditable を持つスパンを動的に追加し、期待どおりに機能しませんが、「Add working」ボタンは contenteditable 属性を持つ div を追加し、正常に機能しています。

あなたのアプリもそうです - すべての contenteditable スパンを div に置き換えたとき、編集は firefox 3.6 と firefox 6.0 でうまくいきました。

補足:アプリケーション コードに関しては、複数のノードで同じidを 使用しないでください(すべてのノートで同じ id "note-title" を使用している場合など)。そうしないと、さまざまなブラウザーから予期しない動作が発生する可能性があります。

一般的なルールは、1 つのページに特定の ID を持つ要素を 1 つだけ持つことができるということです。クラスを使用して複数の要素を「グループ化」し、後で選択します。

于 2011-09-23T09:42:20.860 に答える