JavaScript触发"KeyPress"和"Paste"事件

Question

我有一个 JavaScript，它检查一个字段是否等于15个字符，如果不是，则提交按钮会变灰。如果我手动输入15个字符，它可以完美地工作，但如果我粘贴15个字符，则无法工作。如何使其即使在内容被粘贴到字段中时也进行检查？

我能否使其定期（每几秒钟）检查字符，或者是否有“粘贴时检查”的函数？

我的脚本：

<script type="text/javascript">
jQuery(document).ready(function($){
$('input[type=submit]').attr("disabled","disabled");
$('input[name="item_meta[1234]"]').keypress(function() { //change # to the ID of your field
        if (document.getElementById("field_ygtw9u").value.length < 14) { //disable submit if "no" is selected
              $('input[type=submit]').attr("disabled","disabled");
        } else { //enable the submit button
              $('input[type=submit]').removeAttr('disabled');
        }
  });
});
</script>

<form>
<div id="frm_field_1234_container" class="frm_form_field form-field  frm_required_field frm_top_container">
<label class="frm_primary_label">Minimun 15 char:
    <span class="frm_required"></span>
</label>
<input type="text" id="field_ygtw9u" name="item_meta[1234]" value=""  maxlength="15" class="required"/>

<p class="submit">
<input type="submit" value="Submit" />
</p>
</form>

- kennhardy

---

你的意思是什么？这就是所有的代码。如果有帮助的话，我也会在上面添加我的HTML代码。 - hrdy

试过使用onpaste事件了吗？<input type="text" onpaste="some_js_code_or_function()" />。如果有帮助，请告诉我。 - fnkr

Fiddle http://jsfiddle.net/arunpjohny/3j497/ - Arun P Johny

如果在Chrome和IE中按下“退格键”，则keypress事件将不会触发。 - Arun P Johny

知道了，看看我的答案！ - fnkr

对于Angular用户，请参见ngPaste。 - Edward Newell

Answer 1

将 keypress 改为 keyup，然后它就应该能正常工作。

- zemirco

---

这个方法非常有效。现在它可以验证手动输入和粘贴输入的内容。谢谢！选择这个解决方案是因为它最简单，并且在IE和Chrome中都能正常工作。 - hrdy

Answer 2

已测试，可用。示例代码： http://jsfiddle.net/fnkr/MXnuk/

<script type="text/javascript">
    function checkInput() {
        if (document.getElementById("field_ygtw9u").value.length < 14) { //disable submit if "no" is selected
                $('input[type=submit]').attr("disabled", "disabled");
            } else { //enable the submit button
                $('input[type=submit]').removeAttr('disabled');
            }
    }

    jQuery(document).ready(function ($) {
        $('input[type=submit]').attr("disabled", "disabled");
        $('input[name="item_meta[1234]"]').bind("input", function () { //change # to the ID of your field
            checkInput();    
        });

        $('input[name="item_meta[1234]"]').bind("propertychange", function () { //change # to the ID of your field
            checkInput();
        });
    });
</script>

<form>
    <div id="frm_field_1234_container" class="frm_form_field form-field  frm_required_field frm_top_container">
        <label class="frm_primary_label">Minimun 15 char: <span class="frm_required"></span>

        </label>
        <input type="text" id="field_ygtw9u" name="item_meta[1234]" value="" maxlength="15"
        class="required" />
        <p class="submit">
            <input type="submit" value="Submit" />
        </p>
</form>

- fnkr

Answer 3

尝试以下类似的内容：

var $submit = $('input[type=submit]').attr("disabled","disabled");
$('input[name="item_meta[1234]"]').keyup(function() { //change # to the ID of your field
    var $this = $(this);
    if ($this.val().length < 14) { //disable submit if "no" is selected
        $submit.attr("disabled","disabled");
    } else { //enable the submit button
        $submit.removeAttr('disabled');
    }
  });

$('#field_ygtw9u').on('paste', function(e){
    var $this = $(this);
    setTimeout(function() {
        if ($this.val().length < 14) { //disable submit if "no" is selected
            $submit.attr("disabled","disabled");
        } else { //enable the submit button
            $submit.removeAttr('disabled');
        }
    }, 0);
});

演示：Fiddle

不要使用keypress事件，因为在IE/Chrome中按下backspace时不会触发该事件。

- Arun P Johny

Answer 4

你应该使用 propertychange (IE) 和 input 事件。演示

$('input[name="item_meta[1234]"]').bind("input", function() { //change # to the ID of your field
    if (document.getElementById("field_ygtw9u").value.length < 14) { //disable submit if "no" is selected
          $('input[type=submit]').attr("disabled","disabled");
    } else { //enable the submit button
          $('input[type=submit]').removeAttr('disabled');
    }
});

$('input[name="item_meta[1234]"]').bind("propertychange", function() { //change # to the ID of your field
    if (document.getElementById("field_ygtw9u").value.length < 14) { //disable submit if "no" is selected
          $('input[type=submit]').attr("disabled","disabled");
    } else { //enable the submit button
          $('input[type=submit]').removeAttr('disabled');
    }
});

- ATOzTOA