タグ付けされた質問 「contenteditable」

ユーザーがdivwith contenteditable属性のコンテンツを編集するときに関数を実行したいのですが。onchangeイベントに相当するものは何ですか？ 私はjQueryを使用しているため、jQueryを使用するソリューションが推奨されます。ありがとう！

359 javascript  jquery  html  contenteditable 

私はこの単純なHTMLを例として持っています： <div id="editable" contenteditable="true"> text text text<br> text text text<br> text text text<br> </div> <button id="button">focus</button> 簡単なことをしたい-ボタンをクリックしたときに、キャレット（カーソル）を編集可能なdivの特定の場所に配置したい。Webで検索すると、ボタンクリックにこのJSがアタッチされていますが、機能しません（FF、Chrome）。 var range = document.createRange(); var myDiv = document.getElementById("editable"); range.setStart(myDiv, 5); range.setEnd(myDiv, 5); このように手動でキャレット位置を設定することは可能ですか？

191 javascript  jquery  contenteditable  caret  cursor-position 

contentEditable = 'on' <div>にフォーカスが戻ったときに、カーソル/キャレットの位置を最後の既知の位置に設定するための、決定的なクロスブラウザーソリューションが必要です。コンテンツ編集可能なdivのデフォルトの機能は、クリックするたびにdiv内のテキストの先頭にキャレット/カーソルを移動することですが、これは望ましくありません。 divのフォーカスを離れるときに現在のカーソル位置を変数に格納し、フォーカスが再び入ったときにこれを再設定する必要があると思いますが、まとめたり、機能するものを見つけることができませんでした。コードサンプルはまだ。 誰かが何か考え、作業中のコードスニペットまたはサンプルを持っている場合は、それらを見ていただければ幸いです。 実際にはまだコードはありませんが、ここに私が持っているものがあります： <script type="text/javascript"> // jQuery $(document).ready(function() { $('#area').focus(function() { .. } // focus I would imagine I need. } </script> <div id="area" contentEditable="true"></div> PS。このリソースを試しましたが、<div>では機能しないようです。おそらくtextareaの場合のみ（カーソルをcontenteditableエンティティの最後に移動する方法）

142 javascript  jquery  html  contenteditable  cursor-position 

私が持っているcontenteditable要素を、と私はいくつかのものを入力するたびにヒットし、ENTERそれが新しいを作成<div>し、そこに新しい行のテキストを配置します。これは少し気に入らない。 これが起こらないようにすることはできますか、少なくともそれを単に<br>？ こちらがデモですhttp://jsfiddle.net/jDvau/ 注：これは、Firefoxの問題ではありません。

131 javascript  jquery  google-chrome  html  contenteditable 

contentEditableベースのコントロールの変更イベントをリッスンするにはどうすればよいですか？ var Number = React.createClass({ render: function() { return <div> <span contentEditable={true} onChange={this.onChange}> {this.state.value} </span> = {this.state.value} </div>; }, onChange: function(v) { // Doesn't fire :( console.log('changed', v); }, getInitialState: function() { return {value: '123'} } }); React.renderComponent(<Number />, document.body); http://jsfiddle.net/NV/kb3gN/1621/

120 javascript  dom  contenteditable  reactjs 

私はカーソルまたはキャレットインデックスの位置を設定する方法について、たくさんの優れたクロスブラウザ回答を見つけています contentEditable要素がありますが、そのインデックスをまたは検索する方法については何も見つかりません... 私がしたいのは、このdiv内のキャレットのインデックスを知っていることです keyupです。 したがって、ユーザーがテキストを入力しているときは、いつでもカーソル内のカーソルのインデックスを知ることができます contentEditable要素。 編集：カーソルの座標ではなく、divの内容（テキスト）内のINDEXを探しています。 <div id="contentBox" contentEditable="true"></div> $('#contentbox').keyup(function() { // ... ? });

119 javascript  contenteditable  caret  cursor-position 

JavaScriptでは、inputor textarea要素内のテキストをプログラムで選択できます。で入力をフォーカスしipt.focus()、でその内容を選択できますipt.select()。で特定の範囲を選択することもできますipt.setSelectionRange(from,to)。 私の質問は、contenteditable要素でこれを行う方法はありますか？ elem.focus()キャレットをcontenteditable要素に配置するために、私はできることがわかりましたが、その後実行elem.select()しても機能しません（そして機能しませんsetSelectionRange）。それについてウェブ上で何も見つけることができませんが、おそらく私は間違ったことを探しています... ちなみに、違いがある場合は、Google Chromeでのみ機能します。これはChrome拡張機能のためです。

119 javascript  selection  contenteditable 

Chromeでの出力： <div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;"> hey <div>what's up?</div> <div> <button id="insert_caret"></button> 私は信じているFFそれはこのようになります。 hey <br /> what's up? そしてIEでは： hey <p>what's up?</p> 残念ながら、すべてのブラウザが<br />divタグまたはpタグの代わりにを挿入するように作成する良い方法はありません。または、少なくともオンラインで何も見つけることができませんでした。 とにかく、私が今やろうとしているのは、ボタンを押したときに、キャレットをテキストの最後に設定したいので、次のようになります。 hey what's up?| これを行う方法はすべてのブラウザで機能しますか？ 例： $(document).ready(function() { $('#insert_caret').click(function() { var ele = $('#content'); var length = ele.html().length; ele.focus(); //set caret -> end pos } …

111 javascript  html  cross-browser  contenteditable  caret 

pre要素をcontenteditableに設定して編集のためにフォーカスを置くと、その周りに点線の境界線が表示され、見栄えがよくありません。フォーカスがどこかにあるとき、境界線はそこにありません。 その境界線を削除するにはどうすればよいですか？ ありがとう

96 javascript  jquery  contenteditable 

contenteditableGmailのメモウィジェットのように、キャレットをノードの最後に移動する必要があります。 StackOverflowでスレッドを読みましたが、これらのソリューションは入力の使用に基づいており、contenteditable要素では機能しません。

83 javascript  contenteditable  cursor-position 

スレートまたはProseMirrorを使用してエディターを作成し、インライン要素を使用しているときに、キャレットの位置と選択領域の周りでChromeの奇妙な動作を確認しています。問題1は、下の最初の図に示されています。テキストカーソルの位置が「f」の後ろにある場合、キャレットは画像の上部に表示されます。問題2は2番目の画像にあります。テキストを選択すると、インライン要素と同じ高さの強調表示された領域が表示されます。この動作を制御して、代わりにテキストの位置にキャレットを表示し、テキストの周囲のスペースのみを強調表示する方法はありますか（インライン画像によって行の高さが大きくなっている場合でも） ここで、Firefoxからの動作を模倣したいと思います。 ここでProseMirrorデモを使用してサンプル画像を作成しました：https ://prosemirror.net/examples/basic/ 最小例（おかげで@Kaiido）とJSBin。 <div contenteditable>Test text<img src="https://upload.wikimedia.org/wikipedia/en/9/9b/Yoda_Empire_Strikes_Back.png">Testing</div> これが他のオペレーティングシステムでどのように動作するかはわかりませんが、私はmacOS Catalinaを使用しています。

8 html  css  contenteditable  slatejs  prose-mirror