如何使用“满意”的值更新“满意的2”;与“keyup"事件

How can I use val of "contenteditable 1" to update "contenteditable 2" with "keyup" event?

本文关键字：满意 keyup quot 事件 更新 何使用 满意的      更新时间：2023-09-26

我正在努力实现我的问题的解决方案:

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

我想在keyup事件上使用#block1的值来更新#block2。意味着:一旦用户输入#block1，同样的文本同时出现在#block2中。

到目前为止，这是我的JS，但它没有做我想做的:

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

});

我做错了什么?提前谢谢你!!

改变这一行:

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

只有表单元素有值属性，所以可以通过.value从javascript或.val()的jQuery方法获得。

虽然contenteditable属性允许您在元素中输入文本，但那只是该元素的textContent而不是value。

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

<!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>
相关文章：