Question

快速提问;

我有一个带输入的表单（textarea，select和edit），我想反映我写入的内容。我想将我在此处输入的数据绑定到其他字段，仅用于视觉确认。

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

有什么办法吗？ 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：
jQuery的：
- Attribute-equals ([attribute="value"]) selector。
- change()。
- text()。

Answer 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的所有内容。

Answer 3

您可以使用jQUery

简单地使用加密功能

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

请参阅fiddle

Answer 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() );
});

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>

HTML - 将textinput绑定到标签

5 个答案: