时间戳

首页 > 解决方案 > 将js函数应用于aspx表单上面板中的所有输入

javascript - 将js函数应用于aspx表单上面板中的所有输入

问题描述

我有 ac# WebForms 应用程序，在其中我将 onkeydown 事件添加到 Page_Load 事件的面板内的所有文本框中：

protected void Page_Load(object sender, EventArgs e)
    {
        foreach (var txt in panel1.Controls.OfType<TextBox>())
        {
            txt.Attributes.Add("onkeydown", "capsLock(event);");
        }
    }

以上按预期工作。panel1 中的所有文本框都有 onkeydown。这是一个例子：

<input name="ctl00$MainContent$txtFrom" type="text" id="MainContent_txtFrom" class="form-control" onkeydown="capsLock(event);">

这是我从 w3 复制的 capsLock 函数：

function capsLock() {
            var input = document.getElementById("MainContent_txtFrom");             
            var text = document.getElementById("capslockdiv");
            input.addEventListener("keydown", function (event) {
                if (event.getModifierState("CapsLock")) {
                    text.style.display = "block";
                } else {
                    text.style.display = "none"
                }
            })
        };

上面的工作与 MainContent_txtFrom 的预期一样。但是，与其将每个控件添加到函数中，我更愿意将其应用于所有输入元素。我尝试将 var 输入更改为使用 getElementsByTagName("input")，但当然这不起作用。我怎样才能做到这一点？

标签： javascriptc#

解决方案

您是否已经在 Page_Load 中的代码中为每个输入附加了一个事件。您应该更改函数 capsLock 以接收当前设置的事件参数，然后无需查找元素并再次添加事件。

 function capsLock(event) {
  var text = document.getElementById("capslockdiv");
  if (event.getModifierState("CapsLock")) {
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

推荐阅读