Questions tagged «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中的特定位置。通过网络搜索，我将这个JS附加到了按钮点击上，但是它不起作用（FF，Chrome）： var range = document.createRange(); var myDiv = document.getElementById("editable"); range.setStart(myDiv, 5); range.setEnd(myDiv, 5); 是否可以像这样手动设置插入符号的位置？

190 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内容（文本），而不是光标坐标内的索引。 <div id="contentBox" contentEditable="true"></div> $('#contentbox').keyup(function() { // ... ? });

119 javascript  contenteditable  caret  cursor-position 

在JavaScript中，可以通过编程方式选择input或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 

我需要将插入符号移动到contenteditable节点的末端，例如在Gmail笔记小部件上。 我阅读了StackOverflow上的线程，但是这些解决方案基于使用输入，并且不适用于contenteditable元素。

83 javascript  contenteditable  cursor-position 

我有一个具有contenteditable设置的div，并且在按下Enter键时使用jquery捕获了按键，以调用preventDefault（）。与这个在光标处插入文本的问题类似 ，我想直接插入html，为简便起见，我们将其称为br标签。使用上述问题的答案实际上在IE中有效，因为它使用range.pasteHTML方法，但是在其他浏览器中，br标签将显示为纯文本而不是html。如何修改答案以插入html而不是text？

74 javascript  jquery  contenteditable 

我有一个<div contenteditable=true>由所见即所得定义一些元素的地方。例如<p>，<h1>等等。我想直接将重点放在其中一个元素上。 例如在<p id="p_test">。但是似乎focus()函数对<div>元素，<p>元素不起作用... 在我的情况下，还有另一种方法来定义焦点吗？

73 jquery  focus  contenteditable