获取ContentEditable span元素的文本，并将其同时设置为文本框的文本

Question

<span contentEditable="true" id="00elm" onkeypress="return (this.innerText.length<= 80);">CLICK TO CHANGE</span>
<input type="text" id="txt01" />

当用户通过键入来编辑span元素时，同时textbox将具有相同的文本。怎么样？

Answer 1

使用此

$('#00elm').keyup(function(){
    $('#txt01').val($(this).text())
})

DEMO

Answer 2

如果您不想使用jQuery，请尝试以下代码：

<span contentEditable="true" id="00elm" onkeyup="document.getElementById('txt01').value = ( this.innerText.length<=80 ? this.innerText : document.getElementById('txt01').value );">CLICK TO CHANGE</span>

并在这里演示http://jsfiddle.net/26hwm75n/1/