입력 태그로 실시간 HTML 변경

Question

input 태그를 사용하여 HTML/텍스트 실시간 (변경, 추가, 무엇이든)을 어떻게 변경할 수 있습니까? Stack Overflow에서 코드 인코딩을 뺀 질문을 할 때 미리보기 인터페이스와 매우 비슷합니다. 그냥 단순해야합니다. 예를 들어

, 위의 input 태그에 입력 한 텍스트

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

실시간으로 #example에 추가됩니다. 아마도 innerHTML과 JavaScript가 관련된 것입니까? http://jsfiddle.net/5TnGT/

Answer 1

당신은 jQuery를 함께

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

예를이 작업을 수행 할 수 있습니다. on key up을보십시오. 다음 중 하나를 innerHTML을 당신이 말하는 또는 jQuery를이 .append 또는 .html 또는는 .text 좀 더 쉽게 일을 만들면서

(젠장 너무 느린)

Answer 2

예 자바 스크립트는이 작업을 수행합니다

Answer 3

당신이 돈 경우

일반 자바 스크립트 솔루션 (당신이 어떤 정교한 lib에 필요하지 않습니다 ' 다른 곳에서는 너무 좋아 보이지 않습니다.) :

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

Answer 4

키 업 이벤트에 바인딩 할 수 있습니다. 그런 다음 div 내용을 입력 내용으로 설정하십시오.

http://jsfiddle.net/wYqgc/

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

Answer 5

이 시작할 수 있습니다 :

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

라이브 데모 :http://jsfiddle.net/P4jS9/

Answer 6

이전 답변에 설명보다는 내용 변경하는 여러 가지 방법이 있습니다합니다. 그것들 모두를 듣고 실시간으로 업데이트하십시오. 이 예의 경우 최신 .on() 이벤트 처리를 지원하는 jQuery가 필요합니다. 적절한 구문과 함께 .bind() 또는 .live()을 사용할 수도 있습니다.

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

두 번째 $ (문서)는 나머지 페이지의 마크 업에 따라 더 구체적으로 지정할 수 있습니다.

도 참조 : 나는 @UserIsCorrupt을 http://jsfiddle.net/DccuN/2/