2

这令人沮丧，我只想在点击时在我的页面上创建新的input field内部。我使用 javascript 函数将新的子元素（输入字段）附加到现有的. 这一切看起来像这样：divaspxbuttondiv

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="Pages_test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">

        function clone() {
            var html = document.createElement("input");
            html.setAttribute("id", 1);
            html.setAttribute("name", "dejan");
            html.setAttribute("value", "some text");
            html.setAttribute("type", "text");
            document.getElementById("panj").appendChild(html);
        }

    </script>
</head>
    <body>
        <form id="form1" runat="server">
            <div id="panj">
                Djubrov
            </div>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="clone()" />
        </form>
    </body>
</html>

有趣的是，当我单击按钮时，具有设置文本值的文本元素会闪烁第二次，但它会在后面消失。我错过了什么吗？

4

3 回答 3

7

每次单击该按钮时，都会导致回发。

通过停止回发来修复它，如下所示：

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="clone(); return false;" />
于 2012-02-22T23:41:29.787 回答
1

您的按钮向服务器发出请求，随后的响应是用新的 HTML 文档覆盖页面。从 JavaScript 函数返回false以防止asp:Button回发：

function clone() {
    // your above code
    return false;
}

并修改按钮

OnClientClick="return clone()"

如果您asp:Button不需要与服务器交互，请考虑将其设为<button>or <input type='button' />。

于 2012-02-22T23:39:37.120 回答
0

如果您需要在后面的代码中生成此文本字段的值，最好不要通过 Javascript 动态创建它。您可以创建一个普通文本框并将其设置为最初不可见，如下所示：

<asp:TextBox ID="yourTextboxID" Visible="False" runat="server" />

当按下按钮时，处理后面代码中的事件并使文本框可见：

yourTextboxID.Visible = True;

Viewstate 将在回发中保留这些值。

如果每次按下按钮都应该创建一个额外的文本框，您也可以在代码隐藏中执行此操作，即在 ascx 中使用占位符，然后在每次按下按钮时附加一个新文本框：

yourPlaceholderID.Controls.Add(new TextBox() { ID = "textbox1" });
于 2012-02-23T08:45:49.133 回答