使用输入标记更改HTML实时

如何使用input标记实时更改（更改，添加，无论）HTML /文本？在提问堆栈溢出时减去代码编码时，与预览界面非常相似。它只是很简单。使用输入标记更改HTML实时

例如，

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

无论文本在上面input标签输入被添加到#example实时。可能涉及innerHTML和JavaScript的东西？

来源

2012-01-28 UserIsCorrupt

你可以使用jQuery做这个

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

例子：http://jsfiddle.net/5TnGT/

来源

2012-01-28 03:25:35

很高兴我可以帮助@UserIsCorrupt！ – 2012-01-29 18:53:34

是JavaScript的将做到这一点。看看on key up。然后要么innerHTML的如你所说或jQuery让事情变得更简单与.append或.html或的.text

（该死太慢）

来源

2012-01-28 03:27:00 cosmorogers

纯JavaScript解决方案（你不会，如果你不不需要任何复杂的LIB”在其他地方太花哨）：

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

来源

2012-01-28 03:27:14 pong

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

http://jsfiddle.net/wYqgc/

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

来源

2012-01-28 03:27:20 mrtsherman

你可以用这个启动：

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

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

来源

2012-01-28 03:27:37

还有许多其他的方法来改变比以前的答案中描述的内容。倾听所有这些信息并实时更新。这个例子需要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/

来源

2012-01-28 03:30:54 Aaron

这只是upvote，所以我想我会回来澄清。不要使用.live（），除非由于只有.live的jQuery版本而没有其他选项。可用时使用.on或.delegate。另外，我之前引用了.html（），它允许任意的Javascript被注入页面。当然，任何人都可以通过控制台来做到这一点，但我想将其改为.text（），以消除我宣传页面漏洞的可能性。 – Aaron 2014-03-26 22:33:02

使用输入标记更改HTML实时

回答

相关问题