标签: contenteditable

我想在用户编辑divwith contenteditable属性的内容时运行一个函数.什么相当于一个onchange事件？

我正在使用jQuery,所以任何使用jQuery的解决方案都是首选.谢谢!

我以这个简单的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);

是否可以像这样设置手动插入位置？

我正在使用一个明确的跨浏览器解决方案,当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元素,每当我输入一些东西并点击ENTER它创建一个新的<div>并将新的行文本放在那里.我不喜欢这一点.

是否有可能防止这种情况发生或至少只是用一个<br>？

这是演示http://jsfiddle.net/jDvau/

注意:这不是firefox中的问题.

我找到了很多关于如何在contentEditable DIV中设置光标或插入位置的好的,交叉浏览器的答案,但是没有关于如何获取或找到它的位置......

我想要做的是在关键字中知道该div中插入符号的位置.

因此,当用户输入文本时,我可以随时知道其光标在div中的位置.

编辑:我在div内容(文本)中寻找INDEX,而不是光标坐标.

<div id="contentBox" contentEditable="true"></div>

$('#contentbox').keyup(function() { 
    // ... ? 
});

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-tag,或者至少我在网上找不到任何东西.

无论如何,我现在要做的是,当我按下按钮时,我希望将插入符号设置在文本的末尾,所以它应该看起来像这样:

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
     }
 }

在JavaScript中,可以以编程方式选择input或textarea元素中的文本.您可以使用ipt.focus(),然后选择其内容来聚焦输入ipt.select().您甚至可以选择特定范围ipt.setSelectionRange(from,to).

我的问题是:有没有办法在contenteditable元素中做到这一点？

我发现我可以做elem.focus(),把插入符号放在一个contenteditable元素中,但随后运行elem.select()不起作用(也没有setSelectionRange).我在网上找不到任何关于它的东西,但也许我正在寻找错误的东西......

顺便说一下,如果它有所不同,我只需要它在谷歌浏览器中工作,因为这是Chrome扩展.

如何收听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/

当我将pre元素设置为contenteditable并将焦点放入其中进行编辑时,它会在它周围看到一个看起来不太好的虚线边框.当焦点在其他地方时,边界不存在.
如何删除该边框？

谢谢

我需要contenteditable像在Gmail备注小部件上一样将插入符移动到节点的末尾.

我在StackOverflow上读取了线程,但这些解决方案基于使用输入,它们不适用于contenteditable元素.