jquery - 如何在输入时从表单输入中获取数据

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

在这里摆弄

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