Question

我不确定这是否可行，但我想在实际提交表单之前在“预览”部分显示输入数据。我已经制定了 Fiddle 来帮忙。

HTML：

<form>
  Test:<input type="text" name="test" />
</form>
  <aside class="preview">
    <h5>Preview of Test:</h5>
      <span />
  </aside>

JS：

iData = $('#test').text();
$('.preview span').html(iData);

谢谢！

Answer 1

不确定这是否是你想要的......

但使用keyup()和val()

$(document).ready(function(){
  $('input[name="test"]').keyup(function(){ //using attribute selector here since you havenot defined id for the input
    $('.preview span').html($(this).val()) ; 
  });
})

您可以为输入定义一个id并使用id选择器..

示例：

<强> HTML

<form>
 Test:<input type="text" id="test" name="test" />
</form>
<aside class="preview">
  <h5>Preview of Test:</h5>
  <span />
</aside>

<强>的jQuery

 $(document).ready(function(){
  $('#test').keyup(function(){ 
    $('.preview span').html($(this).val()) ; 
  });
})

fiddle here

Answer 2

使用.keyup()

$("input[name='test']").keyup(function() {
    $('.preview span').html(this.value);
});

演示：http://jsfiddle.net/tymeJV/QJNym/13/

Answer 3

使用keydown和带定时器的输入来防止重复并允许值在keydowns上更改。还可以捕获粘贴剪切并使用上下文菜单和键盘快捷键删除它们。 keydown更多的是与旧浏览器的兼容性，而不是其他任何东西，输入捕获大部分。

$("input[name='test']").on("keydown input",function(){
    var self = this;
    clearTimeout($(this).data("timer"));
    $(this).data("timer", setTimeout(function(){
        $('.preview span').html(self.value);
    },1));
});

jsFiddle

Answer 4

$('input[name="test"]').keyup(function(){
var inputValue = $(this).val();
$('.preview span').text(inputValue);
});

如何输入表单输入中的数据

4 个答案: