javascript - HTML - 将文本输入绑定(bind)到标签

Question

快速提问；

我有一个带有输入(文本区域、选择和编辑)的表单，我想将我写入的内容镜像到其中。我想将此处输入的数据绑定(bind)到其他字段，仅用于视觉确认。

我使用它来创建一个小型内部 ToDo HTML 网页，当您添加新任务时，我希望输入反射(reflect)在输入字段上方的“预览”任务上。

有办法做到这一点吗？ HTML、Javascript 还是 PHP？

提前致谢=)

Answer 1

一个选项，使用 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-equals ([attribute="value"]) selector .
  • change() .
  • text() .