Javascript 如何防止文本框失去焦点后提交按钮提交_Javascript_Asp.net_Submit_Onchange

Javascript 如何防止文本框失去焦点后提交按钮提交

javascript asp.net

Javascript 如何防止文本框失去焦点后提交按钮提交,javascript,asp.net,submit,onchange,Javascript,Asp.net,Submit,Onchange,我有一个带有onchange事件的文本框。当函数激发时，将显示一个隐藏的元素。但是，当由于单击submit按钮而触发onchange时，元素会非常短暂地显示，因为submit函数会在之后立即触发。如果是元素导致文本框“失去焦点”，有没有办法防止提交按钮不启动编辑： jquery 1.3.2 <script type="text/javascript"> function phoneChanged(currentElement, valueToCompareAgainst)

我有一个带有onchange事件的文本框。当函数激发时，将显示一个隐藏的元素。但是，当由于单击submit按钮而触发onchange时，元素会非常短暂地显示，因为submit函数会在之后立即触发。如果是元素导致文本框“失去焦点”，有没有办法防止提交按钮不启动

编辑：

jquery 1.3.2

<script type="text/javascript">
    function phoneChanged(currentElement, valueToCompareAgainst) {
        $('#divPhoneChanged').show('slow');
    }
</script>
<div id="divChange">
    <asp:TextBox ID="txtPhoneCell" runat="server"></asp:TextBox>
</div>
<div id="divPhoneChanged" style="display: none; padding-bottom: 15px">
    <asp:Label ID="lblPhoneChanged" runat="server" Font-Bold="true" Text="Your phone number on file will be updated with the value you provided above.">
    </asp:Label>
</div>
<div style="margin-top: 10px">
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</div>

尝试在javascript中使用

preventDefault

函数

我用标准html代码编写了一个代码。所以没有asp.net。它依赖于在触发

onchange

事件时将全局值（

startSubmit

）设置为

false

。表单仅在其值为true时提交

备选方案：

当触发
```
onchange
```
事件时，可以定义一个隐藏输入，而不是
```
startSubmit
```
变量，该变量的值将更改为
```
false
```
您可以在
```
form
```
元素上定义
```
onsubmit
```
属性，而不是使用
```
.submit（）
```
jquery方法


演示-防止提交
var startSubmit=true；
$（文档）.ready（函数（）{
$（“#表单”）.submit（函数（事件）{
如果（！startSubmit）{
event.preventDefault（）；
startSubmit=true；//设置为“true”，以便下次单击时提交表单。
返回false；
}
返回true；
});
});
功能phoneChanged（currentElement，valueToCompareAgainst）{
$（'#divPhoneChanged'）。show（'slow'）；
startSubmit=false；
}
页面重新加载：



文件中的电话号码将使用您提供的上述值进行更新。
提交

编辑：

我做了很多测试，我找不到比上面的更优雅的解决方案。就个人而言，我会选择像@rickjerrity推荐的那样：

<script type="text/javascript">
    function phoneChanged(currentElement, valueToCompareAgainst) {
        $('#divPhoneChanged').show('slow');
    }
</script>

[...]

<input type="text" id="txtPhoneCell" onkeyup="phoneChanged(this, '4');">


功能phoneChanged（currentElement，valueToCompareAgainst）{
$（'#divPhoneChanged'）。show（'slow'）；
}
[...]

请使用代码片段编辑器粘贴一个小的工作示例。请将代码粘贴到。是的，有一种方法（实际上至少有一种），但是如果您使用jquery版本（！），我们需要您的代码。可以尝试更改

onchange

事件以触发

onkeyup

？除非您有意单击

btnSubmit

按钮，否则上述代码不会触发按钮单击。我错过什么了吗？我确实按了按钮。我只希望第一次单击不会通过，只是像我从文本框中弹出一样。但我不想总是阻止它，我只希望它在导致文本框失去焦点时被阻止。我想你将不得不在

onfocusout

事件中使用它

onfocusout=“someFunction（）”

我很困惑。如果startSubmit在加载时设置为true，然后在phoneChanged函数中设置为false，那么submit如何实际提交？如果触发其他事件，则应将startSubmit再次设置为

true

。但事实上，这看起来并不那么灵活。据我所知，我试图为你的问题找到一个严格的解决办法。我在你的评论中也考虑过这种情况，但你需要提供一些关于你观点的额外细节，例如你心目中的工作流程。我有另一个想法。我来试试，明白了。我希望有一个优雅的解决方案，也许jQuery中包含了一个专门用于此目的的解决方案，但我想我必须使用变量开/关方法。如果（！startSubmit）…，那么您缺少的是submit（）函数的内部。。。。否则{startSubmit=true；}只需添加该位就可以了，我会将其标记为已回答，因为这就是我要走的路线。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title>Demo - Prevent submit</title>

        <script src="https://code.jquery.com/jquery-1.3.2.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            var startSubmit = true;

            $(document).ready(function () {
                $('#theForm').submit(function (event) {
                    if (!startSubmit) {
                        event.preventDefault();
                        startSubmit = true; // Set to "true", so that the next click submits the form.
                        return false;
                    }
                    return true;
                });
            });

            function phoneChanged(currentElement, valueToCompareAgainst) {
                $('#divPhoneChanged').show('slow');
                startSubmit = false;
            }
        </script>
    </head>
    <body>

        <!-- This random number changes on each page refresh, e.g. on each form submission. -->
        Page reloaded: <strong><?php echo rand(1, 99999); ?></strong>

        <br/><br/>

        <form id="theForm" action="" method="post">

            <div id="divChange">
                <input type="text" id="txtPhoneCell" onchange="phoneChanged(this, '4');">
            </div>

            <div id="divPhoneChanged" style="display: none; padding-bottom: 15px">
                <label id="lblPhoneChanged">
                    Your phone number on file will be updated with the value you provided above.
                </label>
            </div>

            <div style="margin-top: 10px">
                <button type="submit" id="btnSubmit">
                    Submit
                </button>
            </div>

        </form>

    </body>
</html>

<script type="text/javascript">
    function phoneChanged(currentElement, valueToCompareAgainst) {
        $('#divPhoneChanged').show('slow');
    }
</script>

[...]

<input type="text" id="txtPhoneCell" onkeyup="phoneChanged(this, '4');">