HTML - 레이블에 텍스트 입력 바인딩

Question

빠른 질문;

나는 입력 (텍스트 영역, 선택 및 편집)과 양식을 가지고 있고, 나는이에 무엇을 쓰기 미러링 할. 시각적 인 확인을 위해 다른 입력란에 입력 한 데이터를 바인딩하고 싶습니다.

나는 작은 내부 할일 HTML 웹 페이지를 만들려면이 사용하고, 당신이 새 작업을 추가 할 때, 나는 입력은 입력 필드 위의 "미리보기"작업에 반영하고자합니다.

이 작업을 수행하는 방법은 무엇입니까? HTML, Javascript 또는 PHP 중 하나? 사전에

감사합니다 =)

Answer 1

특별히 jQuery를 솔루션을 요구하지 않았으므로, 여기에 일반 자바 스크립트입니다 실시간으로 textarea에서 div으로 복사하려고합니다. 동일한 절차는 입력 할 수있는 다른 모든 요소에 적용 할 수 있습니다. 이입니다 그리고 자바 스크립트

<textarea name="test" onkeyup="copyData(this,'copytarget')"></textarea> 
<div id="copytarget"></div> 

:

HTML은 이것이다

function copyData(el, targ) { 
    document.getElementById(targ).innerHTML = el.value; 
} 

textarea에 당신이 키보드의 키 오프 손가락을 들어 올릴 때마다 입력이 단순히 복사 다.

Answer 2

당신은 jQUery

$("#textBox").keyup(function(){ 
    $("#message").val($(this).val()); 
}); 

간단한 사용 키를 백업 기능은 jQuery를 사용하여 fiddle

Answer 3

하나의 옵션을 볼 수

$(':input').change(function(){ 
    $('label[for="' + this.id + '"]').text('Label for "' + this.id + '" value: ' + this.value); 
}); 

JS Fiddle demo . (뒤늦게) 일반 자바 스크립트에서

:

function updateLabel(){ 
    var label = this.labels[0], 
     textProp = 'textContent' in document ? 'textContent' : 'innerText'; 
    label[textProp] = 'Element value: ' + this.value; 
} 

var inputTypeElems = document.querySelectorAll('input, select, textarea'); 

[].forEach.call(inputTypeElems, function(a){ 
    a.addEventListener('change', updateLabel); 
}); 

그리고 더 반응 접근 방식을 제공 :

function updateLabel(){ 
    var label = this.labels[0], 
     textProp = 'textContent' in document ? 'textContent' : 'innerText'; 
    label[textProp] = 'Element value: ' + this.value; 
} 

var inputTypeElems = document.querySelectorAll('input, select, textarea'); 

[].forEach.call(inputTypeElems, function(a){ 
    var evtName; 
    switch (a.tagName.toLowerCase()){ 
     case 'input': 
     case 'textarea': 
      evtName = 'keyup'; 
      break; 
     default: 
      evtName = 'change'; 
    } 
    a.addEventListener(evtName, updateLabel); 
}); 

JS Fiddle demo.

참고 :

• 일반 자바 스크립트 :
  • Array.prototype.forEach().
  • document.querySelectorAll().
  • EventTarget.addEventListener().
• jQuery를 :
  • Attribute-equals ([attribute="value"]) selector.
  • change().
  • text(). 입력 필드에

Answer 4

사용 change 이벤트입니다.

이의 당신이 textarea 및 div가 있다고 가정하자 및 : 당신에

$('input, texarea').change(function(){ 
    $('#previewFor' + $(this).attr('id')).text($(this).val()); 
}); 

$('select').change(function(){ 
    $('#previewFor' + $(this).attr('id')).text($('option:selected', this).text()); 
}); 

Answer 5

삽입 HTML 페이지

<script> 

    var inputTextHandler = function(){ 

     // you input 
     var MyTextInput = $("#MyTextInput"); 

     // set listener to yurs input 
     MyTextInput.change(function(){ 
     // curren text of input field 
     var newText = this.val(); 
     // set this text to prewie block 
     $("#MyTextPrewie").val(newText); 
     }); 

    } 

    // run you handler 
    inputTextHandler(); 

</script> 

<input id="MyTextInput"></input> 
<input id="MyTextPrewie"></input>