如何使用“ contenteditable 1”的val通過“ keyup”事件更新“ contenteditable 2”？

Question

我正在努力解決我的問題：

<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 );

}）;

我做錯了什么？ 提前非常感謝您！！

Answer 1

更改此行：

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

僅表單元素確實具有value屬性，因此可以通過javascript或jQuery的.val()方法中的.value獲取。

盡管contenteditable屬性允許您在元素中輸入文本，但這只是該元素的textContent而不是值。

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

如何使用“ contenteditable 1”的val通過“ keyup”事件更新“ contenteditable 2”？

問題描述

2 個解決方案

解決方案1
0 已采納 2015-10-15 12:33:42

解決方案2
0 2015-10-15 12:47:01

如何使用“ contenteditable 1”的val通過“ keyup”事件更新“ contenteditable 2”？

問題描述

2 個解決方案

解決方案1 0 已采納 2015-10-15 12:33:42

解決方案2 0 2015-10-15 12:47:01

解決方案1
0 已采納 2015-10-15 12:33:42

解決方案2
0 2015-10-15 12:47:01