如何从javascript更改asp：textbox的值

Question

我有一个asp：文本框

<asp:textbox ID="NewName" runat="server" />

当用户点击“取消”按钮时，我想通过使值仅为“”来擦除该文本框中的任何内容。 如果它是文本类型的输入字段，我可以在javascript中执行此操作：

document.getElementById('NewName').value= "";

但我不能这样做，因为它是一个asp：文本框。

Answer 1

当你的asp：textbox呈现给UI时，是的，它只是一个text类型的输入字段。 唯一可能是问题的部分是ID，但可以使用ClientIDMode设置：

<asp:textbox ID="NewName" runat="server" ClientIDMode="Static" />

呈现给：

<input type="text" id="NewName" />

因此您使用的JavaScript应该可以完美运行。

Answer 2

<asp:TextBox>呈现为<input type="text"> ，您可以像使用那样使用，唯一的复杂因素是id=""属性被重写，但您可以这样做：

document.getElementById("<%= NewName.ClientID %>").value = "";

假设此脚本与文本框位于同一页面中。 如果这是在引用的<script src="">那么您将需要使用元素ID的全局脚本变量。

Answer 3

尝试将文本框的ClientIDMode设置为Static

这样javascript应该能够找到与ASPX中相同的ID。

这是一个完整的测试页面

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
    function ClearTB1() {
        document.getElementById("TextBox1").value="";
    }
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <p>
        <asp:TextBox ID="TextBox1" runat="server" Text="test" ClientIDMode="Static"></asp:TextBox><br />
        <asp:TextBox ID="TextBox2" runat="server" Text="test" ClientIDMode="Static"></asp:TextBox><br>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="ClearTB1()"
            CausesValidation="False" UseSubmitBehavior="False" /><br />
    </p>
</asp:Content>

Answer 4

我有同样的问题。 一旦我记得在Ids上有一个关于asp.net的破坏，我就解决了它。

在我的aspx中，我有：

<input type="text" id="sessSubs"/>

再往下，在gridview内（因此使用“class”而不是“id”），我有一个有一个asp的列：TextBox：

<asp:TextBox runat="server" class="paid" />

一旦我回忆起id错误问题，这只是改变我引用文本框的方式的一种情况：

<script type="text/javascript">
$(document).ready(function() {
  function updateSubs()
  {
    var sub = parseFloat($('[id$=sessSubs]').val());
    $('.paid').val(sub);
  }
$(document).on('change, keyup', '[id$=sessSubs]', updateSubs);
});
</script>