2022年4月2日 星期六

[研究][ASP.NET][JavaScript]離開填寫欄位時，檢查必填並彈出alert對話盒視窗

[研究][ASP.NET][JavaScript]離開填寫欄位時，檢查必填並彈出alert對話盒視窗

2022-04-01

環境：Visual Studio 2022 + ASP.NET + WebForm + Web Application + C#

需求：因為某些情況，輸入欄位需要在前端檢查完成，而且必填欄位若未填寫，要彈出對話盒視窗提示，所以 ASP.NET 的 RequiredFieldValidator 控制項不會彈出視窗就不太合用。

focusout()不僅可以檢測出當前元素(HTML element)的失去焦點事件，其下的子元素失去焦點時同樣可以檢測出來。而blur()則檢測不出子元素的失去焦點事件。

focus和blur事件不會冒泡(bubble)，因此這些事件無法進行事件委託(delegate)。

focusin和focusout冒泡到父元素，並且可以委託(delegate)。但是focusin和focusout不是任何標準的一部分，是專有的IE事件，後來被其他一些瀏覽器採用，但不被跨瀏覽器支援。

********************************************************************************

Test.html 

(注意，那段 JavaScript Code 要在 input 之後)，當輸入域失去焦點 (blur) 時做某些事情。


<html><head>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>

</head>
姓名：<input id="title"><br>
備註：<textarea></textarea>

<script>
$('#title').blur(function() {
    if( $(this).val()=='' ) {
        alert('「姓名」欄位必填。');
        //$(this).unbind('blur');
    } 
});
</script></html>


********************************************************************************

Test2.html
【「姓名2」欄位必填。】視窗的「確定」按鈕怎麼按都無用，彈出對話盒視窗永遠存在，無法輸入。

<head>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>

</head>
姓名：<input id="title"><br>
姓名2：<input id="title2"><br>
備註：<textarea></textarea>

<script>
$('#title').blur(function() {
    if( $(this).val()=='' ) {
        alert('「姓名」欄位必填。');
        //$(this).unbind('blur');
    } 
});
$('#title2').blur(function() {
    if( $(this).val()=='' ) {
        alert('「姓名2」欄位必填。');
        //$(this).unbind('blur');
    } 
});
</script>

********************************************************************************

Test3.html
最後一個alert之後用unbind('blur')，【「姓名2」欄位必填。】視窗的「確定」按鈕有用了。
但是【「姓名2」欄位必填。】視窗只會出現一次，以後就算沒填寫也不會再提示。

<html><head>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>

</head>
姓名：<input id="title"><br>
姓名2：<input id="title2"><br>
備註：<textarea></textarea>

<script>
$('#title').blur(function() {
    if( $(this).val()=='' ) {
        alert('「姓名」欄位必填。');
        //$(this).unbind('blur');
    } 
});
$('#title2').blur(function() {
    if( $(this).val()=='' ) {
        alert('「姓名2」欄位必填。');
        $(this).unbind('blur');
    } 
});
</script></html>

可能還要想辦法研究修正或改良。

********************************************************************************

送出表單時檢查 Default.aspx


<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="Default.aspx.cs" Inherits="WebApplication4.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script language="javascript">
        function checkit() {
            var v = document.getElementById('TextBox1');
            if (v.value == '') {
                alert('Required.');
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
        <asp:Button ID="Button1" runat="server" Text="Button" 
            OnClientClick="checkit();" />
    </form>
</body>
</html>


********************************************************************************

離開欄位時檢查， Default.aspx

有Bug，會出現 "必填1", "必填2a" 然後「確定」按鈕怎麼按都出現 "必填2a"，游標始終停在第一個欄位，但也無法輸入。


<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="Default.aspx.cs" Inherits="WebApplication4.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script language="javascript">
        function checkit() {
            var v = document.getElementById('TextBox1');
            if (v.value == '') {
                alert('Required.');
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:TextBox ID="TextBox1" runat="server" onblur="CheckName1()"></asp:TextBox><br />
        <asp:TextBox ID="TextBox2" runat="server" onblur="CheckName2a()"></asp:TextBox><br />
        <asp:TextBox ID="TextBox3" runat="server" onblur="CheckName3()"></asp:TextBox><br />
        
        <%--<asp:TextBox ID="MyName" runat="server" onblur="CheckName2()"></asp:TextBox><br />--%>
        <%--<input type="text" onblur="CheckName2()" id="MyName"><br />--%>
        <%--<asp:TextBox ID="TextBox12" runat="server" ></asp:TextBox><br />--%>
    </form>
    <script language="javascript">
        function CheckName1() {
            if (document.getElementById("<%= TextBox1.ClientID %>").value.length <= 0)
                alert('必填1。');
            }
    </script>
        <script language="javascript">
            function CheckName2a() {
                if (document.getElementById("<%= TextBox2.ClientID %>").value.length <= 0)
                    alert('必填2a。');
            }
        </script>
    <script language="javascript">
        function CheckName2() {
            if (document.getElementById("<%= TextBox2.ClientID %>").value =='')
                alert('必填2。');
        }
    </script>
    <script language="javascript">
        function CheckName3() {
            if (document.getElementById("TextBox3").value=='')
                alert('必填3。');
        }
    </script>
</body>
</html>



********************************************************************************

離開欄位時檢查，

會出現 "必填1", "必填2" 然後「確定」按鈕怎麼按都出現 "必填2"，游標始終停在第一個欄位，但也無法輸入。


<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="Default3.aspx.cs" Inherits="WebApplication1.Default3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Predictable"
                onblur="javascript:if(this.value==''){alert('必填1');}">
            </asp:TextBox><br />
            <asp:TextBox ID="TextBox2" runat="server" ClientIDMode="Static"
                onblur="javascript:if(this.value==''){alert('必填2');}">
            </asp:TextBox><br />
            <asp:TextBox ID="TextBox3" runat="server">              
            </asp:TextBox><br />
            <asp:Button ID="Button1" runat="server" Text="Button" />            
        </div>
    </form>
</body>
</html>


********************************************************************************

離開欄位時檢查，沒有 alert，測試正常。


<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="Default3.aspx.cs" Inherits="WebApplication1.Default3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="TextBox1" runat="server" Text="請輸入1"
                onfocus="javascript:if(this.value=='請輸入1') {this.value='';this.style.color='blue'}"
                onblur="javascript:if(this.value==''){this.value='請輸入1';this.style.color='red'}" ForeColor="Gray">
            </asp:TextBox><br />
            <asp:TextBox ID="TextBox3" runat="server" Text="請輸入2"
                onfocus="javascript:if(this.value=='請輸入2') {this.value='';this.style.color='blue'}"
                onblur="javascript:if(this.value==''){this.value='請輸入2';this.style.color='red'}" ForeColor="Gray">
            </asp:TextBox><br />
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
    </form>
</body>
</html>



********************************************************************************

Google 得到相關資訊

如果是原生的Javascript的alert()方法彈出的彈窗，無法通過JS代碼進行關閉。

alert是阻塞的，所以alert出來的時候是不可能運行代碼的，所以不能用代碼關閉alert。

原生的alert沒法取消. 因為執行alert的時候, js整個線程就卡到彈窗這了, js也暫停執行了.

要用程序取消彈窗, 需要自己來實現一個dom式的窗口, 然後定時關閉。

(完)

相關

javascript - Show alert when focusout, only once - Stack Overflow
https://stackoverflow.com/questions/21579194/show-alert-when-focusout-only-once

.focusout() | jQuery API Documentation
https://api.jquery.com/focusout/

.blur() | jQuery API Documentation
https://api.jquery.com/blur/

jQuery focusout() Method
https://www.w3schools.com/jquery/event_focusout.asp

jQuery - focusin/focusout/focus/blur事件的區別與不同
https://www.cnblogs.com/jie888/p/9140332.html

https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/625398/

http://m.blueshop.com.tw/Thread.aspx?tbfumsubcde=BRD20170915103507DWF


張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)