Question

我在生产金融系统上遇到问题，当用户更改数字输入字段的值（因此onchange函数触发）并立即单击表单提交按钮时，没有任何反应 - 提交按钮保持活动状态（推入）但表格不提交。

在实际系统中，我认为这是AJAX造成的，但是当我创建这个简化版本时，它仍然会发生（我已经包含了按钮样式，因此您可以在Firefox中看到卡住的按钮）。在IE中也会发生，但按钮不会卡在中。

即

如果您点击进入字段，然后点击提交就可以了（表单提交）。
如果您单击字段，请更改字段的值，单击其他位置（以便onchange触发），然后单击“提交它”。

，但..

如果您单击字段，更改字段的值，然后立即单击提交（不点击其他任何地方）它不工作（表单不提交但onchange函数触发）

我做错了什么？我认为这是一个焦点问题，或者从功能问题中返回真假，但它现在超出了我...

在提交之前更改值后，无法要求金融用户点击其他地方...

使用FF46和IE11

新的Ajax.Updater（＆＃39; amount_1＆＃39;，＆＃39; / path / page-ajax＆＃39;，{asynchronous：false，方法：＆＃39; post＆＃39;，参数：＆＃39; WIDGET_NAME = amount_1＆安培;行= 1＆安培; LOCAL_CURRENCY =＆＃39; 55 +＆＃39;＆安培; payment_id =＆＃39; 552 +＆＃39;＆安培; currency_code_id =＆＃39 + $ F （＆＃39; currency_code_id＆＃39）+＆＃39;＆安培; CURRENCY_AMOUNT =＆＃39 + $ F（＆＃39;量＆＃39）+＆＃39;＆安培; update_amount_total_p = 0＆＃39;} ）;

当onchange函数中存在AJAX时，问题再次出现。

<html lang="en">
<head>

<script type="text/javascript">
function convertAmount(Obj)
    {
    alert('convertAmount');
    }
</script>

<style>
input[type="button"], input[type="reset"], input[type="submit"] {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%) repeat scroll 0 0;
    border: 1px outset #eee;
    border-radius: 4px;
    color: #536c80;
    cursor: pointer;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-weight: normal;
    margin: 2px;
    overflow: visible;
    padding: 4px 15px;
}
input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(237, 237, 192, 1) 50%, rgba(226, 226, 170, 1) 51%, rgba(245, 247, 249, 1) 100%) repeat scroll 0 0;
}
input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(237, 237, 192, 1) 33%, rgba(226, 226, 170, 1) 37%, rgba(245, 247, 249, 1) 100%) repeat scroll 0 0;
    border: 1px inset #fff;
}

</style>
</head>

<body onsubmit="alert('submit');">

<form action="testbug2" method="post">

<input id="amount" type="text" maxlength="20" size="15" onchange="convertAmount(this);" value="2,612" name="amount">

<input type="submit" value="Save" name="formbutton:save">

</form>

</body>
</html>

Answer 1

导致此问题的是alert中的convertAmount来电。例如，如果您将alert('convertAmount')更改为console.log('convertAmount')，则其行为与您预期的一样。

请参阅http://jsbin.com/qoqifikehi/edit?html,console,output

Answer 2

根据我的评论，问题似乎是输入的ACTIVE状态（IE焦点和内容已更改 - 不仅仅是焦点）。处于活动状态时，单击“保存”提交将触发onchange事件并完成提交操作。

因此，您希望在提交操作之前更改活动状态并触发警报。

通过在提交按钮上使用鼠标悬停，可以在提交操作之前更改活动状态 - 尽管这也可以构建到通过单击提交触发的功能中。

使用您的示例，这是鼠标悬停的解决方法：

<html lang="en">
<head>

<script type="text/javascript">
function convertAmount(Obj)
    {
    alert('convertAmount');
    }
function loseFocus() {
    var focusedElement = document.activeElement;
    {focusedElement.blur();}

}
</script>

<style>
input[type="button"], input[type="reset"], input[type="submit"] {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%) repeat scroll 0 0;
    border: 1px outset #eee;
    border-radius: 4px;
    color: #536c80;
    cursor: pointer;
    font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
    font-weight: normal;
    margin: 2px;
    overflow: visible;
    padding: 4px 15px;
}
input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(237, 237, 192, 1) 50%, rgba(226, 226, 170, 1) 51%, rgba(245, 247, 249, 1) 100%) repeat scroll 0 0;
}
input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {
    background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(237, 237, 192, 1) 33%, rgba(226, 226, 170, 1) 37%, rgba(245, 247, 249, 1) 100%) repeat scroll 0 0;
    border: 1px inset #fff;
}


</style>
</head>

<body onsubmit="alert('submit');" >

<form action="testbug2" method="post">

<input id="amount" type="text" maxlength="20" size="15" onchange="convertAmount(this);" value="2,612" name="amount">

<input id="thingy" type="submit" value="Save" onmouseover="loseFocus()" name="formbutton:save">

</form>

</body>
</html>

我要再次发表评论，因为我是一名JS新手，但由于尺寸原因，使用它更容易。

在更改表单字段事件

2 个答案: