如何使用“contenteditable 1”的 val 来使用“keyup”事件更新“contenteditable 2”？答案

【问题标题】：How can I use val of "contenteditable 1" to update "contenteditable 2" with "keyup" event?如何使用“contenteditable 1”的 val 来使用“keyup”事件更新“contenteditable 2”？
【发布时间】：2015-10-15 12:28:52
【问题描述】：

我正在努力解决我的问题：

<div id="editable-content">
<span id="static1" class="non-editable">1-800-</span>
<span class="edittext" id="block1" class="editable" placeholder="HELLO" contenteditable="true"autofocus></span>

<div id="editable-content">
<span id="static2" class="non-editable">1-800-</span>
<span class="edittext" id="block2" class="editable" placeholder="HELLO" contenteditable="true"autofocus></span>

我想使用 #block1 的值在 keyup 事件上更新 #block2。意思是：只要用户输入#block1，相同的文本就会同时出现在#block2中。

到目前为止，这是我的 JS，但它并没有做我想做的事情：

$( function() {
function updateTextarea() {
    $( '#block2' ).val( $( '#block1' ).val());
}
$( '#block1' ).keyup( updateTextarea );

});

我做错了什么？提前非常感谢您！

【问题讨论】：

标签： javascript jquery contenteditable

【解决方案1】：

改变这一行：

$( '#block2' ).text( $( '#block1' ).text());

只有表单元素具有 value 属性，因此可以通过 javascript 的 .value 或 jQuery 的 .val() 方法获取。

虽然contenteditable 属性允许您在元素中输入文本，但这只是该元素的文本内容而不是值。

【讨论】：

谢谢！这就是我需要的:)

【解决方案2】：

试试这个示例代码，希望对您有所帮助。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>

<input type="text" id="ch1" value="" /><br/>
<input type="text" id="ch2" value="" />

<script>
$(document).ready(function(){
    $("#ch1").keyup(function(){
        var test = $("#ch1").val();
        $("#ch2").val(test);
    });
});
</script>

</body>
</html>

【讨论】：