使用输入标签实时更改 HTML

Question

如何使用 input 标签实时更改（更改、添加等）HTML/文本？与在 Stack Overflow 上提问时的预览界面非常相似，只是去掉了代码编码。它必须很简单。

例如，

<input type="text" name="whatever" />
<div id="example"></div>

在上述 input 标签中输入的任何文本都会实时添加到 #example 中。 也许涉及 innerHTML 和 JavaScript？

Answer 1

您可以使用 jQuery

$('input').keyup(function(){
    var a = $(this).val();
    $('#example').text(a); 
});

示例来执行此操作： http://jsfiddle.net/5TnGT/

Answer 2

除了前面的答案中所述之外，还有许多其他方法可以更改内容。聆听所有内容并实时更新。此示例需要 jQuery 支持较新的 .on() 事件处理。还可以使用 .bind() 或 .live() 以及适当的语法。

$(document).ready(function() {
    $(document).on('keyup propertychange input paste', 'input', function() {
        $('#example').text($(this).val());
    }); 
});

第二个 $(document) 可以根据页面其余部分的标记变得更加具体。

另请参阅：http://jsfiddle.net/DccuN/2/

Answer 3

是的，javascript 会做到这一点。查看按键。然后，正如您所说的innerHTML或jQuery使事情变得更容易 .append 或 .html 或 .text

（太慢了）

Answer 4

简单的 JavaScript 解决方案（如果你在其他地方不太喜欢的话，你不需要任何复杂的库）：

<input type="text" onkeypress="document.getElementById('example').innerHTML=this.value;" name="whatever" />
<div id="example"></div>

Answer 5

您可以绑定到 keyup 事件。然后将 div 内容设置为输入的内容。

http://jsfiddle.net/wYqgc/

var input = document.getElementsByTagName('input')[0];
var div = document.getElementById('example');
input.onkeyup = function() {
    div.innerHTML = this.value;
};

Answer 6

您可以从以下开始：

input.onkeyup = function () {
    output.innerHTML = this.value;
};

现场演示： http://jsfiddle.net/P4jS9/