HTML - 将文本输入绑定到标签答案

【问题标题】：HTML - Bind textinput to labelHTML - 将文本输入绑定到标签
【发布时间】：2014-05-29 09:31:44
【问题描述】：

快速提问；

我有一个带有输入（文本区域、选择和编辑）的表单，我想将我写入的内容镜像到这些表单中。我想将我在这里输入的数据绑定到其他字段，只是为了视觉确认。

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

有什么办法吗？ HTML、Javascript 还是 PHP？

提前致谢 =)

【问题讨论】：

你的意思是像stackoverflow编辑器？？
是的。使用 javascript，处理您要镜像其内容的控件的 onchange 事件。
是的，实际上，就像这个编辑器 :) 我也对 jQuery 持开放态度。以为我用 javascript 介绍了它 ^^ 将查看下面发布的解决方案 =)

标签： javascript php html textinput

【解决方案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：
jQuery:
- Attribute-equals ([attribute="value"]) selector。
- change()。
- text()。

【讨论】：

值得注意的是这需要jquery？
@David，我不认为你会立即反映在这个“改变”事件中打字
@Dushyant：同意，已更新以解决该缺点。

【解决方案2】：

由于您没有特别要求 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 的所有内容。

【讨论】：

我也支持 jQuery。 =) 但我会在这里尝试你的解决方案！
如果用户使用上下文菜单粘贴文本，这将不起作用。

【解决方案3】：

您可以通过jQUery简单地使用按键功能

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

见fiddle

【讨论】：

【解决方案4】：

在输入字段上使用change 事件。

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

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

【讨论】：

【解决方案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>

【讨论】：