Question

我正在预览我目前使用ASP.NET在网页中输入的内容。我想要实现的是，每当我在文本框中键入或更改文本时，<h3>或label元素也会更改并始终复制textbox值而不刷新浏览器。不幸的是我不能让它发挥作用。这是我试过的。

.ASPX

    <div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
    <div class="Padding10px">
        <h1 class="Margin0px">Preview</h1>
        <hr />
        <p></p>
        <h3 id="NewsTitlePreview" class="TextAlignCenter" runat="server">Title</h3>
        <h5 id="NewsContentPreview" class="TextIndent50px TextAlignJustify" runat="server">Content</h5>
    </div>
</div>

<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
    Title
    <asp:TextBox ID="Titletxt" runat="server" OnTextChanged="Titletxt_TextChanged"></asp:TextBox>
    Content
    <asp:TextBox ID="Contenttxt" runat="server" onchange="Contenttxt_TextChanged"></asp:TextBox>
    <asp:Button ID="Submit" runat="server" Text="Submit" />
</div>

.CS

protected void Titletxt_TextChanged(object sender, EventArgs e)
{
    NewsTitlePreview.InnerText = Titletxt.Text;
}
protected void Contenttxt_TextChanged(object sender, EventArgs e)
{
    NewsContentPreview.InnerText = Contenttxt.Text;
}

我尝试添加Autopostback = true ...但它只能工作并刷新页面，我需要按Tab键或输入或离开文本框:(

更新：我试过这个 - enter link description here但仍然无效:(

Answer 1

您对控件行为的分析是正确的（它只会在您离开控件时触发事件），即使您有IReportWriter oIreportService = (IReportWriter)Activator.CreateInstanceFrom("ExcelWriter", "ReportService.ReportWriters");。

MSDN说明了一切：

TextBox Web服务器控件每次用户输入击键时都不会引发事件，仅在用户离开控件时。您可以让TextBox控件引发您在客户端脚本中处理的客户端事件，这对于响应单个击键非常有用。

所以你要么对当前行为感到满意，要么设置一些客户端事件处理来做一些验证，等等。客户端。

Answer 2

只需在代码和body write onload中添加此脚本函数并调用该函数。

使用Javascript：

<script type="text/javascript">
function startProgram() {
       setTimeout('errorcheck()', 2000);

    }

    function errorcheck() {
        setTimeout('errorcheck()', 2000);
        document.getElementById("NewsTitlePreview").innerText = document.getElementById("Titletxt").value
        document.getElementById("NewsContentPreview").innerText = document.getElementById("Contenttxt").value
    }
</script>


<body onload="startProgram();">
<form id="form1" runat="server">

  <div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
 <div class="Padding10px">
<h1 class="Margin0px">Preview</h1>
<hr />
<p></p>
<h3 id="NewsTitlePreview" class="TextAlignCenter" runat="server">Title</h3>
<h5 id="NewsContentPreview" class="TextIndent50px TextAlignJustify" runat="server">Content</h5>
</div>
</div>

<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
Title
<asp:TextBox ID="Titletxt" runat="server" ></asp:TextBox>
Content
<asp:TextBox ID="Contenttxt" runat="server"></asp:TextBox>
<asp:Button ID="Submit" runat="server" Text="Submit"  />
</div>

</form>
</body>

Answer 3

下载并包含JQuery库。并修改标题和内容文本框，以便他们不会更改其ID

标题 <asp:TextBox ID="Titletxt" ClientIDMode="Static" runat="server"></asp:TextBox>

内容 <asp:TextBox ID="Contenttxt" ClientIDMode="Static" runat="server"></asp:TextBox>

然后添加此脚本，它将起作用。

<script>    

    $(document).ready(function () {

        $('#Titletxt').on('input', function () {
            $("#NewsTitlePreview").text($(this).val());

        });
        $("#Contenttxt").on('input',function () {
            $("#NewsContentPreview").text($(this).val());
        });
    });
</script>

Answer 4

尝试此操作将使用jquery如何更改事件调用不要忘记添加谷歌apis

   <script>

    $('#txtbox').change(function() {
        alert("change Event");
    });

</script>

Answer 5

最好的主意之一...... 只需将您的代码更改为此即可。它的工作原理

ASPX

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"  UpdateMode="Conditional" ViewStateMode="Enabled">
<ContentTemplate>
  <div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
  <div class="Padding10px">
    <h1 class="Margin0px">Preview</h1>
    <hr />
    <p></p>
    <h3 id="NewsTitlePreview" class="TextAlignCenter" runat="server">Title</h3>
    <h5 id="NewsContentPreview" class="TextIndent50px TextAlignJustify" runat="server">Content</h5>
</div>
</div>

<div class="Width960px MarginLeftAuto MarginRightAuto MarginTop10px">
Title
<asp:TextBox ID="Titletxt" runat="server" OnTextChanged="Titletxt_TextChanged"></asp:TextBox>
Content
<asp:TextBox ID="Contenttxt" runat="server" onchange="Contenttxt_TextChanged"></asp:TextBox>
<asp:Button ID="Submit" runat="server" Text="Submit" />
</div>

</ContentTemplate>
</asp:UpdatePanel>

.CS

 protected void Titletxt_TextChanged(object sender, EventArgs e)
{
NewsTitlePreview.InnerText = Titletxt.Text;
UpdatePanel1.Update();
}
protected void Contenttxt_TextChanged(object sender, EventArgs e)
{
NewsContentPreview.InnerText = Contenttxt.Text;
UpdatePanel1.Update();
}

Textchange事件无效

5 个答案: