键入时如何更新多个div（javascript onkeyUp）？

Question

我有一个简短的JavaScript代码，用于更新div元素的内容（在下面的示例中为box1）。 它将默认文本（“ hello”）替换为在输入元素中键入的文本。

我想修改此代码，以便它不仅可以更新box1 div，还可以更新box2和box3。 我尝试使用getElementsByClassName，但无法使其正常工作。 如果有人能帮助我，我将不胜感激。 谢谢。

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

Answer 1

这应该为您工作：）

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

您基本上可以创建一个onkeydown事件，并将其附加到input.chatinput 。 我建议您，不要在HTML中使用内联JavaScript

Answer 2

您走在正确的轨道上。 只需内联使用同一命令三遍：

<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';" />

或使用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)" />

（附带说明：对HTML属性使用双引号。即使您使用单引号，所有浏览器都可以理解您，但如果要与XML / XHTML / HTML5兼容，则双引号是标准且唯一允许的方式）

Answer 3

尝试这个

<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; " />

在这里演示

Answer 4

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)" />

Answer 5

jQuery的：

jsfiddle

    function foo(value){
        $("div").each(function(){
            this.innerHTML = value;
        })
    };

角度：

jsfiddle

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

键入时如何更新多个div（javascript onkeyUp）？

问题描述

5 个解决方案

解决方案1
1 2015-10-13 10:14:50

解决方案2
0 已采纳 2015-10-13 10:19:10

解决方案3
0 2015-10-13 10:19:27

解决方案4
0 2015-10-13 10:19:55

解决方案5
0 2015-10-13 10:22:43

jQuery的：

角度：

键入时如何更新多个div（javascript onkeyUp）？

问题描述

5 个解决方案

解决方案1 1 2015-10-13 10:14:50

解决方案2 0 已采纳 2015-10-13 10:19:10

解决方案3 0 2015-10-13 10:19:27

解决方案4 0 2015-10-13 10:19:55

解决方案5 0 2015-10-13 10:22:43

jQuery的：

角度：

解决方案1
1 2015-10-13 10:14:50

解决方案2
0 已采纳 2015-10-13 10:19:10

解决方案3
0 2015-10-13 10:19:27

解决方案4
0 2015-10-13 10:19:55

解决方案5
0 2015-10-13 10:22:43