顯示具有 JavaScript 標籤的文章。 顯示所有文章
顯示具有 JavaScript 標籤的文章。 顯示所有文章

2024年4月6日 星期六

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用CssClass

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用CssClass

2024-04-06

環境:Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19

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

TextBox1 輸入,TextBox2 自動更新成 TextBox1 ,用前端 JavaScript 做

Default31.aspx

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

<!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>
        document.addEventListener("DOMContentLoaded", function () {
            var textBox1 = document.querySelector(".textBox1");
            var textBox2 = document.querySelector(".textBox2");
            var textBox3 = document.querySelector(".textBox3");
            var textBox4 = document.querySelector(".textBox4");

            textBox1.addEventListener("input", function () {
                textBox2.value = this.value;
            });

            textBox3.addEventListener("input", function () {
                textBox4.value = this.value;
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>"
            SelectCommand="SELECT * FROM [MyTable]"
            UpdateCommand="UPDATE [MyTable] SET [Field1] = @Field1, [Field2] = @Field2 WHERE [SN] = @SN">
            <UpdateParameters>
                <asp:Parameter Name="Field1" Type="String" />
                <asp:Parameter Name="Field2" Type="String" />
                <asp:Parameter Name="SN" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
        <asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1"
            DefaultMode="Edit"
            AllowPaging="True" DataKeyNames="SN"
            >
            <EditItemTemplate>
                SN:<asp:Label ID="SNLabel1" runat="server" Text='<%# Eval("SN") %>' />
                <br />
                Field1:<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Field1") %>' CssClass="textBox1" />
                <br />
                Field2:<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Field2") %>' Enabled="false" CssClass="textBox2" />
                <br />
                <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="更新" />
                &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" />
            </EditItemTemplate>
        </asp:FormView>

        <asp:TextBox ID="TextBox3" runat="server" CssClass="textBox3"></asp:TextBox><br />
        <asp:TextBox ID="TextBox4" runat="server" CssClass="textBox4"></asp:TextBox>
    </form>
    
</body>
</html>


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

在 MasterPage 中,程式碼同上,實際測試正常。

Default32.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
    CodeBehind="Default32.aspx.cs" Inherits="WebApplication1.Default32" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            var textBox1 = document.querySelector(".textBox1");
            var textBox2 = document.querySelector(".textBox2");
            var textBox3 = document.querySelector(".textBox3");
            var textBox4 = document.querySelector(".textBox4");

            textBox1.addEventListener("input", function () {
                textBox2.value = this.value;
            });

            textBox3.addEventListener("input", function () {
                textBox4.value = this.value;
            });
        });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>"
            SelectCommand="SELECT * FROM [MyTable]"
            UpdateCommand="UPDATE [MyTable] SET [Field1] = @Field1, [Field2] = @Field2 WHERE [SN] = @SN">
            <UpdateParameters>
                <asp:Parameter Name="Field1" Type="String" />
                <asp:Parameter Name="Field2" Type="String" />
                <asp:Parameter Name="SN" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
        <asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1"
            DefaultMode="Edit"
            AllowPaging="True" DataKeyNames="SN"
            >
            <EditItemTemplate>
                SN:<asp:Label ID="SNLabel1" runat="server" Text='<%# Eval("SN") %>' />
                <br />
                Field1:<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Field1") %>' CssClass="textBox1" />
                <br />
                Field2:<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Field2") %>' Enabled="false" CssClass="textBox2" />
                <br />
                <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="更新" />
                &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" />
            </EditItemTemplate>
        </asp:FormView>

        <asp:TextBox ID="TextBox3" runat="server" CssClass="textBox3"></asp:TextBox><br />
        <asp:TextBox ID="TextBox4" runat="server" CssClass="textBox4"></asp:TextBox>
</asp:Content>



(完)

相關

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用CssClass
https://shaurong.blogspot.com/2024/04/aspnetwebformtextbox1textbox2cssclass.html

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用OnTextChanged
https://shaurong.blogspot.com/2024/04/aspnetwebformtextbox1textbox2ontextchan.html

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用JavaScript
https://shaurong.blogspot.com/2024/04/aspnetwebformtextbox1textbox2javascript.html

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用jQuery
https://shaurong.blogspot.com/2024/03/aspnetwebformtextbox1textbox2jquery.html

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用OnTextChanged

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用OnTextChanged

2024-04-05

環境:Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19

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

TextBox1 輸入,TextBox2 自動更新成 TextBox1 ,用前端 JavaScript 做

Default21.aspx

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

<!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">
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>"
            SelectCommand="SELECT * FROM [MyTable]"
            UpdateCommand="UPDATE [MyTable] SET [Field1] = @Field1, [Field2] = @Field2 WHERE [SN] = @SN">
            <UpdateParameters>
                <asp:Parameter Name="Field1" Type="String" />
                <asp:Parameter Name="Field2" Type="String" />
                <asp:Parameter Name="SN" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
        <asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1"
            DefaultMode="Edit"
            AllowPaging="True" DataKeyNames="SN"
            >
            <EditItemTemplate>
                SN:<asp:Label ID="SNLabel1" runat="server" Text='<%# Eval("SN") %>' />
                <br />
                Field1:<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Field1") %>' OnTextChanged="TextBox1_TextChanged" AutoPostBack="true" />
                <br />
                Field2:<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Field2") %>' Enabled="false" />
                <br />
                <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="更新" />
                &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" />
            </EditItemTemplate>
        </asp:FormView>

        <asp:TextBox ID="TextBox3" runat="server" OnTextChanged="TextBox3_TextChanged" AutoPostBack="true"></asp:TextBox><br />
        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
    </form>
    
</body>
</html>


Default21.aspx.cs

using System;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class Default21 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void TextBox1_TextChanged(object sender, EventArgs e)
        {
            TextBox TextBox1 = (TextBox)FormView1.FindControl("TextBox1");
            TextBox TextBox2 = (TextBox)FormView1.FindControl("TextBox2");
            TextBox2.Text = TextBox1.Text;
        }

        protected void TextBox3_TextChanged(object sender, EventArgs e)
        {
            TextBox4.Text = TextBox3.Text;
        }
    }
}

測試正常





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

在 MasterPage 中,程式碼同上,實際測試正常。

(完)

相關

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用OnTextChanged
https://shaurong.blogspot.com/2024/04/aspnetwebformtextbox1textbox2ontextchan.html

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用JavaScript
https://shaurong.blogspot.com/2024/04/aspnetwebformtextbox1textbox2javascript.html

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用jQuery
https://shaurong.blogspot.com/2024/03/aspnetwebformtextbox1textbox2jquery.html

2024年4月5日 星期五

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用JavaScript

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用JavaScript

2024-04-05

環境:Visual Studio 2022 + ASP.NET + WebForm + Web Application + C# + SQL Server 2019 + SQL Server Management Studio (SSMS) 19

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

TextBox1 輸入,TextBox2 自動更新成 TextBox1 ,用前端 JavaScript 做

Default11.aspx

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

<!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">
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>"
            SelectCommand="SELECT * FROM [MyTable]"
            UpdateCommand="UPDATE [MyTable] SET [Field1] = @Field1, [Field2] = @Field2 WHERE [SN] = @SN">
            <UpdateParameters>
                <asp:Parameter Name="Field1" Type="String" />
                <asp:Parameter Name="Field2" Type="String" />
                <asp:Parameter Name="SN" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
        <asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1"
            DefaultMode="Edit"
            AllowPaging="True" DataKeyNames="SN">
            <EditItemTemplate>
                SN:<asp:Label ID="SNLabel1" runat="server" Text='<%# Eval("SN") %>' />
                <br />
                Field1:<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Field1") %>' oninput="TextBox1UpdateTextBox2(this.value)" />
                <br />
                Field2:<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Field2") %>' Enabled="false" />
                <br />
                <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="更新" />
                &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" />
            </EditItemTemplate>
        </asp:FormView>

        <asp:TextBox ID="TextBox3" runat="server" oninput="TextBox3UpdateTextBox4(this.value)"></asp:TextBox><br />
        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
    </form>
<script>
    function TextBox1UpdateTextBox2() {
        var textBox1Value = document.getElementById("<%= FormView1.FindControl("TextBox1").ClientID %>").value;
        document.getElementById("<%= FormView1.FindControl("TextBox2").ClientID %>").value = textBox1Value;
    }
</script>
    <script>
        function TextBox3UpdateTextBox4() {
            var textBox1Value = document.getElementById("<%= TextBox3.ClientID %>").value;
    document.getElementById("<%= TextBox4.ClientID %>").value = textBox1Value;
        }
    </script>
</body>
</html>


測試正常





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

在 MasterPage 中,

Default12.aspx


<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true"
    CodeBehind="Default12.aspx.cs" Inherits="WebApplication1.Default12" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script>
        function TextBox1UpdateTextBox2() {
            var textBox1Value = document.getElementById("<%= FormView1.FindControl("TextBox1").ClientID %>").value;
            document.getElementById("<%= FormView1.FindControl("TextBox2").ClientID %>").value = textBox1Value;
        }
    </script>
    <script>
        function TextBox3UpdateTextBox4() {
            var textBox1Value = document.getElementById("<%= TextBox3.ClientID %>").value;
            document.getElementById("<%= TextBox4.ClientID %>").value = textBox1Value;
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:MyDBConnectionString %>"
        SelectCommand="SELECT * FROM [MyTable]"
        UpdateCommand="UPDATE [MyTable] SET [Field1] = @Field1, [Field2] = @Field2 WHERE [SN] = @SN">
        <UpdateParameters>
            <asp:Parameter Name="Field1" Type="String" />
            <asp:Parameter Name="Field2" Type="String" />
            <asp:Parameter Name="SN" Type="Int32" />
        </UpdateParameters>
    </asp:SqlDataSource>
    <asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1"
        DefaultMode="Edit"
        AllowPaging="True" DataKeyNames="SN">
        <EditItemTemplate>
            SN:<asp:Label ID="SNLabel1" runat="server" Text='<%# Eval("SN") %>' />
            <br />
            Field1:<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Field1") %>' oninput="TextBox1UpdateTextBox2(this.value)" />
            <br />
            Field2:<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Field2") %>' Enabled="false" />
            <br />
            <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update" Text="更新" />
            &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel" Text="取消" />
        </EditItemTemplate>
    </asp:FormView>

    <asp:TextBox ID="TextBox3" runat="server" oninput="TextBox3UpdateTextBox4(this.value)"></asp:TextBox><br />
    <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
</asp:Content>


實際測試正常。

(完)

相關

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用OnTextChanged
https://shaurong.blogspot.com/2024/04/aspnetwebformtextbox1textbox2ontextchan.html

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用JavaScript
https://shaurong.blogspot.com/2024/04/aspnetwebformtextbox1textbox2javascript.html

[研究]ASP.NET,WebForm,TextBox1值自動更新到TextBox2,用jQuery
https://shaurong.blogspot.com/2024/03/aspnetwebformtextbox1textbox2jquery.html

2023年1月7日 星期六

[研究][JavaScript]友善列印不顯示按鈕的方法

[研究][JavaScript]友善列印不顯示按鈕的方法

2023-01-07

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

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

Default.html

<style type="text/css">
@media print { 
 .noprint{display:none;}
}
</style>


<div align="right" class="noprint">
<input type="button"  value="列印" onclick= "window.print() " style="cursor:pointer;" />
</div>

<div class="noprint">
<input type="button"  value="列印2" onclick= "window.print() " style="cursor:pointer;" />
</div>

<!--這樣不行
<div style="display:none;">
<input type="button"  value="列印2" onclick= "window.print() " style="cursor:pointer;" />
</div>

這樣不行
<input type="button"  value="列印3" onclick= "window.print() " style="cursor:pointer;display:none;" />

這樣不行
<input type="button"  value="列印4" onclick= "window.print() " style="display:none;" />
-->

列印去掉頁首頁尾和日期的指令碼

<style type="text/css">
@media print { 
 .noprint{display:none;}
}
</style>

<script type="text/javascript">
function doPrint() {
        // 獲得body的html
        bdhtml=window.document.body.innerHTML;
        // 列印開始的標誌
        sprnstr="<!--startprint-->";
        // 列印結束的標誌
        eprnstr="<!--endprint-->";
        // 從列印開始的位置擷取到末尾
        prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
        // 從開始擷取到列印結束的位置
        prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
        // 替換html
        window.document.body.innerHTML=prnhtml;
        // 列印
        window.print(); 
    }
</script>

<div align="right" class="noprint">
<input type="button"  value="列印" onclick= "doPrint()" style="cursor:pointer;" />
</div>

<input type="button"  value="列印2" onclick= "doPrint()" style="cursor:pointer;" />


(完)

相關

2022年4月29日 星期五

[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能

[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能

[研究][ASP.NET]JavaScript 抓取 ContentPlaceHolder 中 ASP.NET 控制項的 ID

2022-04-27

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

ASP.NET控制項(Control)的 ID,如果是在 MasterPage 架構的 ContentPlaceHolder1 中,在瀏覽器中看到的 ID 變更。

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

Site1.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.Site1" %>

<!DOCTYPE html>

<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

Default.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master"
    AutoEventWireup="true" CodeBehind="Default.aspx.cs"
    Inherits="WebApplication1.Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script>
        function ShowPW() {
            var x = document.getElementById("ContentPlaceHolder1_TextBox1");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <asp:TextBox ID="TextBox1" required="required" TextMode="Password" 
        AutoComplete="Off" runat="server"></asp:TextBox>
    <br />
    <asp:CheckBox ID="CheckBox1" Text="顯示密碼" OnClick="ShowPW()" runat="server" />
    <br />
</asp:Content>


瀏覽器看到的 HTML Source

原來在 .aspx 中的 ID 是 TextBox1,現在變成了 ContentPlaceHolder1_TextBox1,所以 JavaScript 要抓取時,不能用 TextBox1,要用 ContentPlaceHolder1_TextBox1。

另外很多情況下 HTML 元素 (element) 的 ID 和 name 是相同的,但此時不同,不要錯用了 name 的 ctl00$ContentPlaceHolder1$TextBox1

<!DOCTYPE html>

<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>

</title>
    <script>
        function ShowPW() {
            var x = document.getElementById("ContentPlaceHolder1_TextBox1");
            if (x.type === "password") {
                x.type = "text";
            } else {
                x.type = "password";
            }
        }
    </script>
</head>
<body>
    <form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="zAE3P/7wt0M3uv/5llCSAr3yf1PYvO8mEmfl6tswaGanRIG/x4nfITMOV5YGUgeLMHwaNhnfWljHJTTBC2TZ45KhDzFigI1gv5UL8n6PYkKT/xzB4XP6NCz1FMeNwvEQ4ROBEG2cz4Ldmpz+AjDxzMXzThdSyXoXdkdLqMgJyBYupUKulNKCHi1ahgWWBU3s" />
</div>

<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="ESsA+ggMfjTJUH5bZ2Ix51c3ZJSrS30FLzobHXB//9f+pkaGPz/XpxMB0qtWzrGdAYXQO15QnOIwvAsrW3xORSbmc5iKMedbRkWkZzOg2aDJlloKooaor6L1rL71cB/6eP3190y1XdCMp7erjYcfGQ==" />
</div>
        <div>
            
    <input name="ctl00$ContentPlaceHolder1$TextBox1" type="password" id="ContentPlaceHolder1_TextBox1" required="required" AutoComplete="Off" />
    <br />
    <input id="ContentPlaceHolder1_CheckBox1" type="checkbox" name="ctl00$ContentPlaceHolder1$CheckBox1" onclick="ShowPW();" /><label for="ContentPlaceHolder1_CheckBox1">顯示密碼</label>
    <br />

        </div>
    </form>
</body>
</html>



(完)

相關

[研究][ASP.NET]MasterPage中ContentPlaceHolder內的 JavaScript「顯示密碼」功能
[研究][ASP.NET]JavaScript 抓取 ContentPlaceHolder 中 ASP.NET 控制項的 ID
https://shaurong.blogspot.com/2022/04/aspnetmasterpagecontentplaceholder.html

[研究][ASP.NET]登入畫面表單美工設計(一)
https://shaurong.blogspot.com/2022/04/aspnet.html

[研究][JavaScript]切換顯示和隱藏密碼
https://shaurong.blogspot.com/2019/02/javascript.html

[研究][JavaScript][C#][ASP.NET] Select2 v4.0.3 - jQuery Plugin 安裝 - 讓 DropDownList 可以輸入關鍵字,即時過濾顯示下拉選項
https://shaurong.blogspot.com/2017/01/caspnet-select2-v403-jquery-plugin.html


2022年4月21日 星期四

[研究][ASP.NET]JavaScript alert對話盒視窗彈出位置測試

[研究][ASP.NET]JavaScript alert對話盒視窗彈出位置測試 

2022-04-21

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

因為之前這篇,使用不同的彈出方式,影響了版面美工,所以測試一下

[研究][ASP.NET]登入畫面表單美工設計(三)
http://shaurong.blogspot.com/2022/04/aspnet_14.html

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" 
    CodeBehind="Default.aspx.cs" Inherits="WebApplication1.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>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br />
            <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" /><br />
            <asp:Button ID="Button3" runat="server" Text="Button" OnClick="Button3_Click" /><br />
            <asp:Button ID="Button4" runat="server" Text="Button" OnClick="Button4_Click" /><br />
        </div>
    </form>
</body>
</html>

 

Default.aspx.cs


using System;
using System.Web.UI;

namespace WebApplication1
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Button1_Click(object sender, EventArgs e)
        {
            // 網頁不會空白
            Page.ClientScript.RegisterStartupScript(Page.GetType(), "message", 
                "<script language='javascript' defer>alert('測試1。');</script>");
        }

        protected void Button2_Click(object sender, EventArgs e)
        {
            // 網頁會空白
            Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), 
                "message", "<script language='javascript' defer>alert('測試2。');</script>");
        }

        protected void Button3_Click(object sender, EventArgs e)
        {
            //轉向
            Page.ClientScript.RegisterStartupScript(Page.GetType(), 
                "message", "<script language='javascript' defer>alert('測試3。');
                window.location='Default2.aspx'</script>");
        }

        protected void Button4_Click(object sender, EventArgs e)
        {
            Response.Write("<script>alert('測試4。');</script>");
        }
    }
}

執行結果

HTML Source

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
</title></head>
<body>
<form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="o9slSZhygiMVNvGkKm7W+AC6+Upc
xpuluNY9PxJ6uGlVm+ehQeKP8QRpNI+K6U9nur+OOzh5XxhxiBfLLisaobAvcFJWfEtFFX6uGA2SoVY=
" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
  value="2YiTg3ryJ9ZjOyW5pJk8lCLyCR9oq8jPQ5Rqx/wsr4TFuFAufY8ae6bZsfYnTc+DVh9/GBUBE/Pif9gK6SZGJ
KL56dq1O49gFugO2t0nbRFqhFeS+yHfppLGsEiHOAaEcwdpDhhrSYZd7Ja6MbXcakAxKZz5brdMjeb64B/YwrbDdjh3
fYVjoearqWw6oEdb
" />
</div>
<div>
<input type="submit" name="Button1" value="Button" id="Button1" /><br />
<input type="submit" name="Button2" value="Button" id="Button2" /><br />
<input type="submit" name="Button3" value="Button" id="Button3" /><br />
<input type="submit" name="Button4" value="Button" id="Button4" /><br />
</div>
</form>
</body>
</html>


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

按鈕1執行結果

按下「確定」按鈕後,檢視HTML Source 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
</title></head>
<body>
<form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="V/URd1sI61D1R20GkaO2JMbyRBpYC
a3oyrpLmbHXV0l5TRB8YRPcCeoMW9bAdv7x+FqZENO7yC5HD26km+ESvjmaHyMj06upTT1WpHmtNjA=
" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
  value="58gvSY0JmeL5tCExZ8oAcWDBnQYcIqhTp1CUDx/NUAlVjoVQ8Xe2MMd4QD4vW76eq/cAiqVHc5gRKM26D++uX
LsHKWi4Gs+JVX9las/jt0ULZ7K0i06eWGDdTWxkJBbmglMeSD0kAI8Blqh2Txu2DSDOw8QJuBukWhlKcRxxVc4f4Uqk
nNiMp/la8HtNw6UG
" />
</div>
<div>
<input type="submit" name="Button1" value="Button" id="Button1" /><br />
<input type="submit" name="Button2" value="Button" id="Button2" /><br />
<input type="submit" name="Button3" value="Button" id="Button3" /><br />
<input type="submit" name="Button4" value="Button" id="Button4" /><br />
</div>
<script language='javascript' defer>alert('測試1。');</script></form>
</body>
</html>


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

按鈕2執行結果


按下「確定」按鈕後,檢視HTML Source 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
</title></head>
<body>
<form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="4ME0Bu06b3I2m1E97XWIY58QhwN
Bd5+baNZV0a/t3DUD38liJGN9uBYsU4NjdjbZ+/6Nv4HPzjhmZj6sZnJuN0Ln+bNLi7pm3aIbO7RI8eY=
" />
</div>
<script language='javascript' defer>alert('測試2。');</script>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="hEZjvkte3Odzv9KOrHUh4TkVpfaXe9jONEzp57b6rAyoiFUzPlA8/GEpdwyV3zw62MwWmoT9FKlWuqc0tY
DSH0p4u4pjtb09piW8dgEGbOtYieCJt0WSjcSJzOM+DOm/kxiOohR1BcNeUI4TyNhp9lYC8Lz68GvKe44ioBp2SFr
K/r/+PqEpfVLSSLR+yAwj
" />
</div>
<div>
<input type="submit" name="Button1" value="Button" id="Button1" /><br />
<input type="submit" name="Button2" value="Button" id="Button2" /><br />
<input type="submit" name="Button3" value="Button" id="Button3" /><br />
<input type="submit" name="Button4" value="Button" id="Button4" /><br />
</div>
</form>
</body>
</html>


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

按鈕3執行結果,因為轉址到 Default2.aspx 了,不檢視


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

按鈕4執行結果

按下「確定」按鈕後,檢視HTML Source 

<script>alert('測試4。');</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>
</title></head>
<body>
<form method="post" action="./Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="h7NFRRI447D991l2ZQcy+9JFtiY
rPds9xYts5NmrhmiDnphRBshNVXvDXoJLtKkY1a/iJvDZIJDGqlrCtdweebYgaG13QzqqMJTRO5Rlflg=
" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="7cdoDgcjEodG4L/ihUVTKy1F95vzm00YhJe7kC73m2hpB6V6WqiHO4b6/jeGFTAkl0C6iJonsXGFUTIHMom
Hi7dKcVZaEeQZCkxpjRSH2THwknHv3hYS9hmarSSWgmCIX+PeAkbYUSc1WbSETL7r5KNlxuISDz349vOtxc1zbv/Dt
9yDBw/o41z8bF8A41m3
" />
</div>
<div>
<input type="submit" name="Button1" value="Button" id="Button1" /><br />
<input type="submit" name="Button2" value="Button" id="Button2" /><br />
<input type="submit" name="Button3" value="Button" id="Button3" /><br />
<input type="submit" name="Button4" value="Button" id="Button4" /><br />
</div>
</form>
</body>
</html>

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

結論:

使用 Response.Write("<script>alert('測試4。');</script>"); 結果在 HTML Source 會出現在 <html> 之前,有點怪異,所以可能盡量避免這種。

(完)

相關

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


2021年10月8日 星期五

[研究]JavaScript 列印 pdf

[研究]JavaScript 列印 pdf

2021-10-08

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
</head>
<body>
<input type="button" name="tprint" value="列印 PDF" onClick="print()" />
<a href="javascript:window.print()">列印 PDF</a> 
</body>
</html>


(完)

2020年11月23日 星期一

[研究] HTML, CSS, JavaScript, jQuery, jQuery UI, Bootstrap 彈出對話盒視窗

[研究] HTML, CSS, JavaScript,  jQuery, jQuery UI, Bootstrap 警告(Alert)、對話盒 (Dialog)、彈出視窗(Popup Window)、彈出對話盒(Popup Dialog)、彈出對話盒視窗(Popup Dialog Window)

2020-11-23

HTML 對話盒視窗因為是平面式而非彈出式,少人用。

CSS 對話盒視窗感覺是平面式的,只是Modal會以區塊覆蓋顯示於其他內容上。

JavaScript 彈出對話盒視窗是比較多人用的。但以 alert()、confirm()、prompt()、windows.open() 較常用,其他較少用,且非每種瀏覽器或版本都支援,有些雖支援,但預設沒有啟用。

jQuery 是用 JavaScript 開發的,沒有特別提供的對話盒。

jQuery UI 需要 jQuery,主要強化 UI ( User Interface,使用者介面) 部分。

BootStrap 3.x 和 4.x 需要 jQuery,但未來推出的 5.x 不需要 jQeury。BootStrapAlert對話盒是平面式而非彈出式,少人用。Bootstrap Modal Plugin 是彈出式的。

比較進階強化的對話盒,混用的 HTML, CSS, JavaScript,  jQuery, jQuery UI, Bootstrap 等標準和技術。網路上某些程式範例,可能已經淘汰,或不支援新版的套件,無法正常運作。

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

HTML

HTML <dialog> Tag

https://www.w3schools.com/tags/tag_dialog.asp

HTML 範例:<dialog open>This is an open dialog window</dialog>

(下圖) 直接顯示在網頁上的對話盒視窗,而非彈出式的。

可用下面 JavaScript 操作 (但也可操作非 HTML <dialog> Tag )

HTML DOM Dialog Object,包含 document.getElementById(), document.createElement(), open, close(), show(), showModal() 等。 

https://www.w3schools.com/jsref/dom_obj_dialog.asp

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

CSS

W3.CSS Alerts,平面式警告對話盒,其實是使用 w3-panel

https://www.w3schools.com/w3css/w3css_alerts.asp

W3.CSS Modal

https://www.w3schools.com/w3css/w3css_modal.asp



<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>W3.CSS Modal</h2>
  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal</button>
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
  <div id="id01" class="w3-modal">
    <div class="w3-modal-content">
      <div class="w3-container">
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
        <p>Some text. Some text. Some text.</p>
        <p>Some text. Some text. Some text.</p>
      </div>
    </div>
  </div>
</div>
            
</body>
</html>

(下圖)看起來像是平面式的對話盒,只是會覆蓋顯示於其他網頁內容上。

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

JavaScript

alert()、confirm()、prompt()

https://www.w3schools.com/js/js_popup.asp

alert()

https://www.w3schools.com/jsref/met_win_alert.asp

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

confirm()

https://www.w3schools.com/jsref/met_win_confirm.asp

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

prompt()

https://www.w3schools.com/jsref/met_win_prompt.asp


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

windows.open() 

https://www.w3schools.com/jsref/met_win_open.asp

另外開啟新瀏覽器視窗,載入某址的網頁

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

HTML DOM Dialog Object,包含 document.getElementById(), document.createElement(), open, close(), show(), showModal() 等。 

https://www.w3schools.com/jsref/dom_obj_dialog.asp

JavaScript 建立:var x = document.createElement("DIALOG");

JavaScript 存取:var x = document.getElementById("myDialog");

JavaScript,判斷是否開啟(不會實際去開啟):var x = document.getElementById("myDialog").open;

https://www.w3schools.com/jsref/prop_dialog_open.asp

Dialog close() Method

https://www.w3schools.com/jsref/met_dialog_close.asp

showModal()

https://www.w3schools.com/jsref/met_dialog_showmodal.asp



<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <p>Click the button to show the dialog.</p>
    <button onclick="myFunction()">Show dialog</button>
    <p><b>Note:</b> Use the "Esc" button to close the modal.</p>
    <p><b>Note:</b> The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.</p>
    <dialog id="myDialog">This is a dialog window</dialog>
    <script>
        function myFunction() {
            document.getElementById("myDialog").showModal();
        }
    </script>
</body>
</html>

(下圖)Google Chrome 版本 87.0.4280.66 (正式版本) (64 位元)、Miccrosoft Edge 86



(下圖) IE11


FireFox 83 按下「Show Dialog」按鈕沒有反應。

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

showModalDialog() 和 showModalessDialog() 不是標準,僅某些瀏覽器和版本支援。

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

jQuery UI

jQuery UI 需要 jQuery,主要強化 UI ( User Interface,使用者介面) 部分。

Dialog

https://jqueryui.com/dialog/

官方範例使用的路徑稍作修正如下

Test.htm


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#dialog" ).dialog();
  } );
  </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the &apos;x&apos; icon.</p>
</div>
 
 
</body>
</html>

(下圖) 執行結果

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

Bootstrap

Bootstrap Alert ( Bootstrap 3 和 4 需要 jQuery, 未來Bootstrap 5 不需要 jQuery)

https://www.w3schools.com/bootstrap/bootstrap_alerts.asp


<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

<div class="alert alert-info">
  <strong>Info!</strong> Indicates a neutral informative change or action.
</div>

<div class="alert alert-warning">
  <strong>Warning!</strong> Indicates a warning that might need attention.
</div>

<div class="alert alert-danger">
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div>

Bootstrap Alert 比較不像 JavaScript 傳統 alert(),它不會彈出對話盒或彈出視窗,而是平面文字框,比較像是用 CSS 去達成的。

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

Bootstrap Modal Plugin

https://www.w3schools.com/bootstrap/bootstrap_modal.asp

only supported in Chrome 37+, Safari 6+ and Opera 24+.


<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

(下圖) 對話盒是彈出式的

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


(完)

相關

谷歌,火狐瀏覽器不支援showModalDialog的解決方法

其他 · 發表 2019-02-13

https://www.itread01.com/content/1549994237.html