admin 管理员组

文章数量: 1086019

Is there a way ( except Rangy library ) to change contentEditable Div InnerHTML on the fly, like on keyup, with no cursor position / focus lose? I'd like to use pure javascript code, as simple as it is possible.

for example :

<div id="divId" contentEditable="true" onkeyup="change(this)"></div>

then javascript :

function change(element)
{
  element.innerHTML = element.innerHTML.replace(/.../, '...');
}

Thanks.

Is there a way ( except Rangy library ) to change contentEditable Div InnerHTML on the fly, like on keyup, with no cursor position / focus lose? I'd like to use pure javascript code, as simple as it is possible.

for example :

<div id="divId" contentEditable="true" onkeyup="change(this)"></div>

then javascript :

function change(element)
{
  element.innerHTML = element.innerHTML.replace(/.../, '...');
}

Thanks.

  • javascript
  • html
  • contenteditable
Share Improve this question edited Sep 13, 2011 at 13:55 John asked Sep 13, 2011 at 13:36 JohnJohn 7,91017 gold badges67 silver badges96 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 7

If you're replacing the HTML, you will need some means of saving and restoring your selection. The options are:

  1. Insert elements with IDs at the start and end of the selection before the HTML replacement, retrieve them by ID afterwards and move the selection boundaries using those elements. This is the most robust method and is what Rangy does.
  2. Store some kind of character-based offset for the start and end of the selection before the HTML replacement and recreate the selection afterwards. This has all kinds of problems in the general case but may be good enough, depending on your needs. I've posted functions on SO to do this before that depend on Rangy, but you could easily strip out the Rangy stuff if you don't mind losing support for IE < 9.
  3. Store and restore selection boundaries by pixel coordinates. Browser support for this is not good and will not be suitable if your HTML replacement changes the layout.

This doesn't use the keyup event but perhaps it will suffice? Note that applies to the body you can obviously target just a certain element.

document.body.contentEditable='true';
document.designMode='on';
void 0;

本文标签： javascriptcontentEditable div replace innerHTML on the flyStack Overflow

版权声明：本文标题：javascript - contentEditable div replace innerHTML on the fly - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744088047a2531506.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。