我有一个简短的JavaScript代码，更新了div元素（下例中的box1）的内容。它用输入元素中输入的文本替换默认文本（“hello”）。如何在输入时更新多个div（javascript onkeyUp）？

我想修改此代码，以便它不仅更新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" />

来源

2015-10-13 akopacsi

你在正确的轨道上。只要使用相同的命令三次，内联：

<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兼容）

来源

2015-10-13 10:19:10

谢谢你，约翰。 – akopacsi

这应该为你工作:)

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

您basicly创建onkeydown事件，并将其连接到input.chatinput。我建议你，不要在HTML中使用内联JavaScript

来源

2015-10-13 10:14:50

试试这个

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

Demo Here

来源

2015-10-13 10:19:27

document.getElementsByClassName('box')元素的退货单，所以你应该为循环为此在

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

来源

2015-10-13 10:19:55

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

来源

2015-10-13 10:22:43

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

回答

的jQuery：

角：

相关问题