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

0

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

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

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

Любой способ сделать это? Или HTML, Javascript или PHP?

Спасибо заранее =)

  • 2
    ты имеешь в виду как редактор stackoverflow ??
  • 0
    Да. Используйте javascript, обработайте событие onchange элементов управления, содержимое которых вы хотите отразить.
Показать ещё 1 комментарий
Теги:
textinput

5 ответов

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 каждый раз, когда вы отбрасываете палец с клавиатуры на клавиатуре.

Поделиться
  • 0
    Я тоже открыт для jQuery. =) Но я попробую ваше решение здесь!
  • 2
    Это не будет работать, если пользователь вставит текст с помощью контекстного меню.
4

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

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

Демо-версия JS Fiddle.

В обычном 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.

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

Поделиться
  • 0
    Стоит отметить, что для этого нужен jquery?
  • 0
    @ Дэвид, я не думаю, что у вас будет немедленное отражение ввода с этим событием "изменения"
Показать ещё 1 комментарий
0

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

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

$('select').change(function(){
    $('#previewFor' + $(this).attr('id')).text( $('option:selected', this).text() );
});
Поделиться
0

вставить в вас страницу 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>
Поделиться
0

вы можете просто использовать функцию key up с jQuery

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

Смотрите скрипку

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню