問題タブ [contenteditable]

私はcontenteditabledivでユーザー選択を見つけるためにいくつかのコードを書いています、私はこのquirksmodeの記事から私のコードを取っています。

ChromeとFirefoxでテストしていalert(userSelection)ますが、関数内または関数外でalert（findSelection（）;）を実行すると、が返されますfunction getSelection() {[native code]}。私がそうするならば、console.log(findSelection();)それは私に与えますgetSelection()。私が間違ったことはありますか？

ページの読み込みに焦点を当てたテキストエリアのように機能する編集可能な div が必要です (つまり、マウスで div を選択しなくても、点滅するカーソルが表示され、入力が div に表示されます)。編集可能な div で focus() を呼び出してみましたが、うまくいきません。

カレットの配置に関するいくつかの投稿を読みましたが、私の特定の問題に答えるものはないようです。

1. 私は2つのdiv（div1とdiv2）を持っています
2. div1 =編集不可のdiv
3. div2 = contenteditable div
4. 両方のdivにまったく同じ内容が含まれています
5. ユーザーがdiv1をクリックすると、非表示になり、div2が正確な場所に表示され、ユーザーは編集できます

問題：キャレットをdiv2の正確な位置にdiv1として表示したい

したがって、ユーザーがdiv1をクリックした場所を読み取る方法が必要です。次に、div2が表示されたら、カーソル/キャレットを同じ場所に置きます。つまり、getCaretLocation（in_div_id）およびsetCaretLocation（in_div_id）関数のセットです。

それを行う方法はありますか？

ありがとう -

編集可能な div を作成しました。スマイリー記号をスマイリー画像に置き換えたいと考えています。

しかし、文字列を dom 要素 (<img> や <span> など) に置き換えると、div は編集できなくなります (つまり、テキストをクリックするとキャレットが表示されますが、文字を追加することはできません)。 .

どうしたの？(私はSafariでこれをやっています)

これが私のコードです：

Webアプリケーションでcontenteditablediv要素を使用していて、その領域で許可される文字数を制限するソリューションを考え出そうとしています。制限に達すると、文字を入力しようとしても何も起こりません。これは私がこれまでに持っているものです：

これにより、文字数が「max」で指定された数に制限されますが、領域のテキストがjquery .text（）関数によって設定されると、カーソルは領域の先頭にリセットされます。したがって、ユーザーが入力を続けると、新しく入力された文字がテキストの先頭に挿入され、テキストの最後の文字が削除されます。だから本当に、私はコンテンツ編集可能領域のテキストの終わりにカーソルを保つための何らかの方法が必要です。

質問の古いバージョンは以下のとおりです。さらに調査した後、質問を言い換えることにしました。以前と同じように、テキストを強調表示せずにcontenteditable divにフォーカスする必要があります。フォーカスをまっすぐにすると、Chromeでテキストが強調表示されます。

テキストエリアのキャレット位置をリセットすることで、テキストエリアのこの問題が解決されたことを理解しています。contenteditable要素を使用してこれを行うにはどうすればよいですか？私が試したすべてのプラグインは、textareasでのみ機能します。ありがとう。

質問の古い言い回し：

フォーカスしたいコンテンツ編集可能な要素がありますが、すべてを選択するのではなく、要素の前にカーソルを置く場合に限ります。

elem.trigger('focus');jqueryを使用すると、要素全体のすべてのテキストがchromeで選択されます。Firefoxは正しく動作し、テキストの先頭にキャレットを設定します。Chromeを希望どおりに動作させるにはどうすればよいですか、または焦点が合っていない可能性があります。

皆さんありがとう。

キャレットの位置にテキストを挿入する必要がある contenteditable div があります。

これはIEで簡単に行うことができます document.selection.createRange().text = "banana"

これを Firefox/Chrome に実装する同様の方法はありますか?

（解決策がここにあることは知っていますが、contenteditable divでは使用できず、不器用に見えます）

ありがとうございました！

contenteditable divのカーソル/キャレット位置に（jqueryまたはその他を使用して）htmlを挿入するにはどうすればよいですか：

たとえば、カーソル/キャレットが「hello」と「world」の間にあり、ユーザーが「insert image」などのボタンをクリックした場合、javascript を使用<img src=etc etc>すると、「hello」と「world」の間に次のようなものが挿入されます。私はこれを明確にしたことを願っています = S

サンプルコードは大歓迎です。どうもありがとうございました!

私は Firefox で Javascript WYSIWYG エディターに取り組んでいます。これを実現するために、contenteditable 属性を true に設定した div を使用しています (この特定のプロジェクトでは contenteditable iframe を使用できません)。この contenteditable div は、contenteditable ではない別の div にネストされています。execCommand を使用してフォント スタイルとサイズ、太字、斜体、下線などの書式を適用すると、次の 2 つの問題が発生します。

• div 内のすべてのテキストが選択されている場合、execCommand は機能しません。execCommand は、テキストの一部のみが選択されている場合は正常に機能しますが、すべてのテキストが選択されている場合は何もしません。
• テキストを選択せず​​に書式を適用すると、予期しない結果が生じます。たとえば、テキストを選択せず​​に execCommand('bold') を呼び出してから入力すると、スペースバーが挿入されるまで太字のテキストが入力され、その時点で太字の書式設定は失われます (興味深いことに、別のスペースが挿入されるまで; その後、テキストは再び太字になります）。

言いたいことを理解するには、Firefox 3 で次の HTML コードを実行してみてください。

次のことを試してください。

• 「いくつか」という単語のみを選択します。太字ボタンをクリックします。これにより、予想どおり、テキストが太字になります。
• 「Some editable text」という語句全体を (手動または CTRL-A を使用して) 選択します。太字ボタンをクリックします。何も起こりません。これは、上記の最初のバグを示しています。
• バックスペース キーを押して、div をクリアします。太字ボタンをクリックして、入力を開始します。スペースを入れていくつかの単語を入力します。これにより、2 番目のバグが示されます。

これらの問題を引き起こしている可能性のあるものと、それらを回避する方法についてのアイデアは大歓迎です!

ページに複数の<p contenteditable="true"></p>要素があります。それらが1つの編集可能な要素であるかのように、それらのバラバラな要素間を移動するために矢印キーを使用するソリューションを探しています。

たとえば、キャレットが最初の段落の最後の行の 10 番目の文字にあり、ユーザーが下矢印キーを押すと、キャレットは 2 番目の段落にジャンプし、10 番目の文字にキャレットを配置する必要があります (存在する場合)。その最初の行に。

コメントをお待ちしております。