Android和HTML5数字输入自动提交行为

Android and HTML5 Number Input AutoSubmit Behavior

本文关键字：提交 HTML5 数字输入 Android      更新时间：2023-09-26

我正在编写一个web页面，该页面具有用于估计运费和税费的单个邮政编码字段的表单。我希望表单提交一旦用户点击数字键盘上的回车键。

。

<form method="GET">
    <input type="hidden" id="ProductCode" value="12345" />
    Enter zip: <input type="number" id="ZipCode" />
</form>

当前的行为显然不够明显:

<script>
$(document).ready(function() {
    $('#ZipCode').keyup(function() {
        if($(this).val().length == 5) {
            $(this).closest('form').submit();
        }
    });
    $('#ZipCode').focus(function() {
        $(this).val('');
    });
});
</script>

理想情况下，我希望表单自动提交时，输入键被关闭或(如果可能的话)当软键盘被用户关闭。有没有办法做到这一点使用JavaScript在Android浏览器?

您可以尝试添加隐藏按钮。这至少在Chrome中有效。当表单有提交按钮时，它会在按enter键时自动触发。

<form method="GET">
    <input type="hidden" id="ProductCode" value="12345" />
    Enter zip: <input type="number" id="ZipCode" />
    <button type="submit" style="display:none">
</form>

您可以使用$("form").submit(function(){ // run when form is submitted })实现提交代码

在表单中放置提交按钮，输入键将自然提交表单。

<form method="GET">
    <input type="hidden" id="ProductCode" value="12345" />
    Enter zip: <input type="number" id="ZipCode" />
    <input type="submit" value="submit" style="visibility: hidden" /> 
</form>

如果您需要验证绑定到表单提交事件，并执行必要的验证。

$('form').submit(function() {
    var invalid = $('#ZipCode').val().length !== 5;
    if(invalid)
        return false
});
相关文章：