键入时如何更新多个div（javascript onkeyUp）？
[英]How to update multiple divs while typing (javascript onkeyUp)?
问题描述
I have a short javascript code that updates the content of a div element (box1 in the example below). 
我有一个简短的JavaScript代码，用于更新div元素的内容（在下面的示例中为box1）。 It replaces the default text ("hello") with the text typed in an input element. 它将默认文本（“ hello”）替换为在输入元素中键入的文本。
I would like to modify this code so it'd update not only the box1 div, but box2 and box3 too. 我想修改此代码，以便它不仅可以更新box1 div，还可以更新box2和box3。 I tried to use getElementsByClassName, but I was unable to make it work. 我尝试使用getElementsByClassName，但无法使其正常工作。 I would be very grateful if somebody'd help me. 如果有人能帮助我，我将不胜感激。 Thank you. 谢谢。
<div class="font1" id="box1">hello</div>
<div class="font2" id="box2">hello</div>
<div class="font3" id="box3">hello</div>
<input type='text' name='fname' class='chatinput' onkeyUp="document.getElementById('box1').innerHTML = this.value" />
5 个解决方案
解决方案1
1 2015-10-13 10:14:50
This should work for you :) 这应该为您工作：）
document.querySelector('.chatinput').onkeydown = function(){
var box1 = document.querySelector('#box1'),
box2 = document.querySelector('#box2'),
box3 = document.querySelector('#box3');
box1.innerHTML = box2.innerHTML = box3.innerHTML = (this.value);
}
You basicly create a onkeydown event, and attach it to the input.chatinput . 您基本上可以创建一个onkeydown事件，并将其附加到input.chatinput 。 I advise you, not to use inline javascript in the HTML 我建议您，不要在HTML中使用内联JavaScript
解决方案2
0 已采纳 2015-10-13 10:19:10
You're on the right track. 您走在正确的轨道上。 Just use the same command three times, either inline: 只需内联使用同一命令三遍：
<input type="text" name="fname" class="chatinput" onkeyUp="
document.getElementById('box1').innerHTML = this.value;
document.getElementById('box2').innerHTML = this.value+'hello';
document.getElementById('box3').innerHTML = this.value+'world';" />
or use a JavaScript function: 或使用JavaScript函数：
<script>
function clickMe(s){
document.getElementById("box1").innerHTML = s;
document.getElementById("box2").innerHTML = s+"hello";
document.getElementById("box3").innerHTML = s+"world";
}
</script>
<input type="text" name="fname" class="chatinput" onkeyUp="clickMe(this.value)" />
(Side note: Use double quotes for HTML-attributes. Even though all browser will understand you if you use single quotes, the double quote is the standard and the only allowed way if you want to be XML/XHTML/HTML5-compatible) （附带说明：对HTML属性使用双引号。即使您使用单引号，所有浏览器都可以理解您，但如果要与XML / XHTML / HTML5兼容，则双引号是标准且唯一允许的方式）
解决方案3
0 2015-10-13 10:19:27
Try this 尝试这个
<div class="font1" id="box1">hello</div>
<div class="font2" id="box2">hello</div>
<div class="font3" id="box3">hello</div>
<input type='text' name='fname' class='chatinput' onkeyUp="document.getElementById('box1').innerHTML = this.value; document.getElementById('box2').innerHTML = this.value; document.getElementById('box3').innerHTML = this.value; " />
解决方案4
0 2015-10-13 10:19:55
document.getElementsByClassName('box') return list of element so you should do this in a for loop document.getElementsByClassName('box')返回元素列表，因此您应该在for循环中执行此操作
function onKeyUp($this){ for(var i in document.getElementsByClassName('box')) document.getElementsByClassName('box')[i].innerHTML = $this.value }
<div id="box1" class="box">hello</div> <div id="box2" class="box">hello</div> <div id="box3" class="box">hello</div> <input type='text' name='fname' class='chatinput' onkeyUp="onKeyUp(this)" />
解决方案5
0 2015-10-13 10:22:43
jQuery: jQuery的：
function foo(value){
$("div").each(function(){
this.innerHTML = value;
})
};
angular: 角度：
<body ng-app>
<div class="font1" id="box1">Hello {{value}}</div>
<div class="font2" id="box2">hi {{value}}</div>
<div class="font3" id="box3">nihao {{value}}</div>
<input type='text' name='fname' class='chatinput' ng-model="value" />
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.