使用輸入標記更改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實時

回答

相關問題