I am struggling to achieve a solution to my problem:
我正在努力解决我的问题:
<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>
I want to use the value of #block1 to update #block2 on a keyup event. Means: As soon as user types into #block1 the same text simultaneously appears in #block2.
我想使用#block1的值来更新keyup事件中的#block2。意思是:只要用户输入#block1,同一文本就会同时出现在#block2中。
This my JS so far but it doesn't do what i want it to do:
这是我的JS到目前为止,但它没有做我想要它做的事情:
$( function() {
function updateTextarea() {
$( '#block2' ).val( $( '#block1' ).val());
}
$( '#block1' ).keyup( updateTextarea );
});
What do I do wrong? Thank you so much in advance!!
我做错了什么?非常感谢你提前!!
2 个解决方案
#1
0
change this line:
改变这一行:
$( '#block2' ).text( $( '#block1' ).text());
Only form elements does have the value attribute so that can be get via .value
from javascript or .val()
method of jQuery.
只有表单元素确实具有value属性,因此可以通过jQuery的javascript或.val()方法获取.value。
Although contenteditable
attribute lets you enter text in the element but that is just textContent of that element not value.
虽然contenteditable属性允许您在元素中输入文本,但这只是该元素的textContent而不是值。
#2
0
Try with this its a sample code hope this will help you.
尝试使用它的示例代码希望这对您有所帮助。
<!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>
#1
0
change this line:
改变这一行:
$( '#block2' ).text( $( '#block1' ).text());
Only form elements does have the value attribute so that can be get via .value
from javascript or .val()
method of jQuery.
只有表单元素确实具有value属性,因此可以通过jQuery的javascript或.val()方法获取.value。
Although contenteditable
attribute lets you enter text in the element but that is just textContent of that element not value.
虽然contenteditable属性允许您在元素中输入文本,但这只是该元素的textContent而不是值。
#2
0
Try with this its a sample code hope this will help you.
尝试使用它的示例代码希望这对您有所帮助。
<!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>