使用 javascript 更改 ASP:textbox 文本的正确代码

编程


我有一个带有 asp.TextBoxes 的 aspx 网络表单,供用户输入数字。
如果他们随后单击复选框,这些数字应更改为零。
问题是它们没有改变。
这些是文本框的示例 –

<asp:TextBox CssClass="pcnt18right" type="number" min="0" style="width:10%; text-align:right" placeholder="00" ID="TimeMins" runat="server"></asp:TextBox>

<asp:TextBox CssClass="pcnt18right" type="number" min="0" Style="text-align: left;" ID="TimeSecs" runat="server"></asp:TextBox>

这是复选框 –

<input type="CheckBox" id="LandingOver75m" class="regular-checkbox" onclick="MakeScoresZero()" runat="server" />

我尝试过的:

JavaScript 写在 Web 表单的末尾
单击复选框时运行的 JavaScript 代码称为“MakeScoresZero()”。 我测试了一下,通过插入一行带有alert(“123”);的复选框,代码会在单击复选框时运行。 作为第一行。 这是唯一有效的线路。

<script type="text/javascript">
    function MakeScoresZero() {
        let Mins = document.getElementById("TimeMins");
        Mins.Text = "0";
        let Secs = document.getElementById("TimeSecs");
        Secs.Text = "0";
    }
  </script>

除了 .Text,我还尝试了 .value、.innerHTML 和 .textContent,但都没有成功。

任何帮助都很感激,因为我花了几天时间在这上面,这非常令人沮丧。

解决方案1

以下应该可以解决问题 –

JavaScript
<script type="text/javascript">
    function MakeScoresZero() {
        document.getElementById("TimeMins").value = 0;        
        document.getElementById("TimeSecs").value = 0;        
    }
  </script>

解决方案2

WebForms“破坏”您设置的 ID,以确保它们在整个页面中是唯一的。 这在数据绑定控件中尤其重要,因为同一模板可以重复多次。

如果您在浏览器中查看页面的源代码,您会发现控件的 ID 与您在标记中设置的 ID 并不完全相等。

有几种选择:

1) 如果您的脚本是在页面内内嵌定义的,则可以使用表达式来传递 ClientID 到脚本:

ASPX
<script type="text/javascript">
function MakeScoresZero() {
    let Mins = document.getElementById("<%= TimeMins.ClientID %>");
    Mins.Text = "0";
    let Secs = document.getElementById("<%= TimeSecs.ClientID %>");
    Secs.Text = "0";
}
</script>

2) 如果您确定永远不会发生冲突,请设置 ClientIDModeStatic:

ASPX
<asp:TextBox CssClass="pcnt18right" type="number" min="0" style="width:10%; text-align:right" placeholder="00" ID="TimeMins" ClientIDMode="Static" runat="server"></asp:TextBox>
<asp:TextBox CssClass="pcnt18right" type="number" min="0" Style="text-align: left;" ID="TimeSecs" ClientIDMode="Static" runat="server"></asp:TextBox>

ASP.NET 4.0 中的 ClientIDMode – Rick Strahl 的网络日志[^]

3) 不是寻找 ID 上的精确匹配,而是寻找 ID 结尾为 期望值:

JavaScript
function MakeScoresZero() {
    let Mins = document.querySelector("input[id^='TimeMins']");
    Mins.Text = "0";
    let Secs = document.querySelector("input[id^=TimeSecs']");
    Secs.Text = "0";
}

属性选择器 – CSS:级联样式表 | 属性选择器 MDN[^]

4) 使用其他方法来识别目标控件 – 例如,添加虚拟 CSS 类,然后选择具有该类的元素。

コメント

タイトルとURLをコピーしました