为Web页面中的所有TextBox控件附加事件

 

2014 年 4 月 25 日更新

博客继续...

受一个问题的启发，我正在撰写一篇关于如何为 *网页* 中的所有 *文本框* 附加 `按键` 事件的简单技术的博客文章。

那么，这项技术是什么？

• 循环遍历 *网页* 中的所有控件
• 查找哪些是 `文本框`
• 对于这些框，附加 `按键` 事件

我们将使用 *JavaScript* 来完成它。

您可以详细说明每个步骤吗？

为什么不！！！让我们探索一下。

循环遍历 *网页* 中的所有控件

var allInputs = new Array();

// store collection of all <input/> elements
allInputs = document.getElementsByTagName('input');

所以，`allInputs` 数组将包含 *网页* 上的所有输入元素。

查找哪些是文本框

for (i = 0; i < allInputs.length; i++) {
    // loop through and find <input type="text"/>
    if (allInputs[i].type == 'text') {
        // This is a TextBox. Here we can attach any Event.
    }
}

在这里，我们循环遍历所有输入，并检查其类型是否为 `text`。 如果满足，它就是一个 `文本框`。
在那个 `if` *子句* 中，我们可以附加我们需要的任何事件。 我们将在下一步中附加 `按键` 事件。

对于那些框，附加按键事件

我们将附加 `按键` 事件作为示例。 为此，我们将使用 jQuery KeyPress。

for (i = 0; i < allInputs.length; i++) {
    // loop through and find <input type="text"/>
    if (allInputs[i].type == 'text') {
        // This is a TextBox. Here we can attach any Event.
        // Let's attach KeyPress Event to the TextBox.
        $(allInputs[i]).keypress(function (event) {
            if (!isNumber(event)) {
                event.preventDefault();
            }
        });
    }
}

在这里，我们附加了 `按键` 事件，并且在该事件内部，我们调用一个函数 `isNumber(event)`。 如果按下的键不是数字，它将忽略，因为 event.preventDefault() 会生效，否则它将允许。

注意

函数 `isNumber(event)` 只是检查按下的键是否是 `数字` 键。 请参考下面给出的演示*链接*，查看此函数的代码。

看看实际效果

在此处查看演示.

更新、改进和更快的 *jQuery* 方法

感谢 Kshirodra Meher 和 Subhajit Datta 提供的宝贵建议。

他们建议了什么？

在我们的 第一步 中，我们循环遍历页面中存在的所有 `文本框`，这可以用下面编码的更简单的 *jQuery* 块来优化。

$("input[type=text]").bind("keypress", function (e) {
    if (!isNumber(e)) {
        return false;
    }
});

因此，这里的主要改变者是选择器 `$("input[type=text]")`。 它选择类型为 `text` 的所有输入。 要了解更多信息，请单击 属性等于选择器 [name="value"]。 我们还限制了在 `文本框` 上粘贴事件，因为它允许所有字符进入框中。

$("input[type=text]").bind("paste", function (e) {
    return false;
});

新演示

在此处查看新演示.

分享您的想法！！！

如果您喜欢这篇 *博客*，请与您的朋友分享。 如果您有任何疑问或问题，请随时发表评论。
CodeProject