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

第二个$（文档）可以根据页面其余部分的标记更具体。

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

Answer 3

是的，javascript会这样做。看看on key up。然后就像你说的那样使用innerHTML或jQuery使.append或.html或.text

更容易一些

（该死的太慢了）

Answer 4

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

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

使用输入标记实时更改HTML

6 个答案: