Question

这里我正在做的是抓取我在我的内容可编辑div上写的文本并将其放在另一个div中（就像一个堆栈溢出一样）。这里我面临一个烦人的问题。

1.我的内容div落后。我在编辑器上写的内容显示内容div中少了一个字符。

2.当我按空格键删除某些字符时，就会发生同样的事情。我必须按两次空格（这意味着从文本编辑器中删除两个字符）从内容div中删除一个字符

我希望编辑器和内容div并排。这意味着无论我在编辑器中编写还是删除，都希望内容div具有相同的功能。

我该怎么做？

var editor=document.getElementById('editor');
var content=document.getElementById('content');

editor.addEventListener('keypress',function(e){
         
          content.innerHTML=editor.innerHTML;
		 
});

   	  #editor{
	     position:relative;
	     width:500px;
		 height:400px;
		 border:1px solid black;
		 word-wrap: break-word;
		 padding-left:4px;
		 padding-right:4px;
		 padding-bottom:1em;
		 box-sizing:border-box;
		 overflow:scroll;
	  }
	  #content{
	      position:relative;
	     width:500px;
		 height:400px;
		 border:1px solid black;
		 word-wrap: break-word;
		 padding-left:4px;
		 padding-right:4px;
		 padding-bottom:1em;
		 box-sizing:border-box;
		 overflow:scroll;
	  }

<div id='editor' contenteditable='true' ></div>
<div id='content'></div>

Answer 1

即使你可以绑定一个keyup事件，也可以绑定一个按键。一旦按下一个键，就会触发按键，但最新的修改只能在按键后进行。

var editor=document.getElementById('editor');
var content=document.getElementById('content');

editor.addEventListener('keyup',function(e){

          content.innerHTML=editor.innerHTML;

});

Answer 2

如何使用input事件，即使在上下文菜单中使用copy和paste也可以使用。

var editor=document.getElementById('editor');
var content=document.getElementById('content');

editor.addEventListener('input',function(e){ 
  content.innerHTML=editor.innerHTML; 
});

Fiddle

从文本编辑器中捕获文本并将它们放在div中

2 个答案: