HTML - привязать ввод текста к метке

Question

Быстрый вопрос;

У меня есть форма с входными данными (textarea, select и edit), и я хочу отразить то, что я пишу в них. Я хочу связать введенные здесь данные с другими полями, только для визуального подтверждения.

Я использую это для создания небольшой внутренней веб-страницы ToDo HTML, и когда вы добавляете новую задачу, я хочу, чтобы входные данные отражались в задаче "предварительного просмотра" над полями ввода.

Есть ли способ сделать это? HTML, Javascript или PHP?

Заранее спасибо =)

Answer 1

Поскольку вы специально не спрашивали о решении jQuery, вот один в простом javascript:

Давайте предположим, что у вас есть textarea а также divи вы хотите скопировать из textarea в div в реальном времени (та же процедура применима к любому другому элементу, в котором вы можете ввести).

HTML это:

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

Тогда JavaScript это:

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

Это просто копирует все, что напечатано в textarea каждый раз, когда вы снимаете палец с клавиатуры на клавиатуре.

Answer 2

Один из вариантов, используя jQuery:

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

JS Fiddle demo.

В простом JavaScript (с опозданием):

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.

Рекомендации:

• Простой JavaScript:
  • Array.prototype.forEach(),
  • document.querySelectorAll(),
  • EventTarget.addEventListener(),
• JQuery:
  • Атрибут-равно ( [attribute="value"] ) селектор.
  • change(),
  • text(),

Answer 3

Использование change событие на полях ввода.

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

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

Answer 4

Вы можете просто использовать функцию Key Up с JQUery

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

Увидеть скрипку

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>