jquery：模拟实时输入的事件答案

【问题标题】：jquery: event for simulating live typingjquery：模拟实时输入的事件
【发布时间】：2011-08-11 20:52:01
【问题描述】：

第 1 部分：
当用户“更改”输入字段时，我可以使用任何事件来获取回调。我对变化的定义是模拟如下效果。比如说，我想在用户在输入框中输入时更新标签。我尝试了 jquery“更改”事件。它有效，但没有现场效果。更新输入字段后，我必须单击屏幕中的某个位置来更新标签。

第 2 部分：

好吧，如果这不是一个好主意，我可能会阻止在输入键上提交表单。也不确定有什么好方法。快速搜索找到了这个答案。

<form action="" method="post" onsubmit="return false;">

尚未测试，但希望提交按钮仍然有效。

编辑：经过测试，并且 onsubmit="return false;"甚至阻止提交按钮。

谢谢，
bsr。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

应该这样做：

input.bind('keydown keypress', function() {
    setTimeout(function() {
        label.text(input.val());
    }, 0);
});

现场演示： http://jsfiddle.net/simevidas/qTBxv/

【讨论】：

【解决方案2】：

第 1 部分

您可以每隔keyUp 更新一次，但我建议您至少在用户输入完成后等待 1 秒。

var timer;

var changeTxt = function(){
    // Change label text here.
};

$("#myInput").keyup(function(){
    clearTimeout(timer);
    timer = setTimeout(changeTxt, 1000);
});

第 2 部分

您发布的示例阻止了表单提交。这是你的目标吗？

编辑：

我认为您正试图控制表单的提交？

$("#myForm").submit(function(){
    if(/* Your condition here */){
        return false;
        //Only if your condition is true, stop form submission
    }
});

【讨论】：

感谢您的回答..我将对其进行测试，第 2 部分：不，我希望提交按钮起作用，而不是输入键。我在这里看到了一个溶胶stackoverflow.com/questions/1563062/…stackoverflow.com/questions/585396/… .. 但希望一个简单的溶胶。
对于第一个（stackoverflow.com/questions/1563062/…），您可以使用他的功能，例如：$("#myForm").keypress(preventEnterSubmit);

【解决方案3】：

您是否尝试过 keydown 或 keypress 事件？

【讨论】：

【解决方案4】：

我希望结合使用表单和字段验证：在这里找到工作样本：http://jsfiddle.net/ezmilhouse/9mNc4/1/

你的html：

<form method="post" action="post.php">
    <input type="text" name="" value="" />
    <label>Name</label>
    <div></div>
</form>

你的 js：

// prevent form from being posted empty
$('form').live('submit', function(evt){
    if ( $('input', this).val() === "" ) {
        evt.preventDefault();
        alert('Field is required!');
    }
});


// validate form field on the fly
var min = 3;
$('input').live('keyup change', function(){
    if ($(this).val().length < min) {
        $('div').html('<span class="invalid">min. 3 characters.</span>');
    } else {
        $('div').html('<span class="valid">ok!</span>');
    }
});

【讨论】：

【解决方案5】：

您可以使用名为oninput 的东西。

<form oninput="xx.value=aa.value">
   <input type="text" name="aa" value="">
   <output name="xx" for="aa"> </output>
</form>

【讨论】：