Question

我很难找到一个跨浏览器兼容的，基于Javascript的方法来将函数附加到元素。似乎微软（当然）已经有了自己的做事方式，并且很难做到这一点。基本上，我在Javascript中动态创建一个表，并将TEXTAREA元素添加到行中的单元格。我需要为TEXTAREA的onkeydown添加一个函数，以便检查文本框的长度是否达到最大限制（不幸的是TEXTAREA元素不支持MaxLength属性）。

是否存在适用于FF和IE6，IE7，IE8和IE9的简单解决方案？

Answer 1

我建议你看看jQuery。那么一个例子就是

$('textarea').keydown(function () { });

请注意，在此示例中，我将eventhandler附加到每个textarea。更好的方法是使用css类或其他更具体的选择来找到正确的textareas。例如：

$('textarea.limitedlength').keydown(function () { });

另请注意，您应在创建元素后执行此操作。如果你不想打扰时间，使用live函数，jQuery会将eventhandler附加到任何新找到的元素。

$('textarea.limitedlength').live('keydown', function () { });

好处是任何跨浏览器的问题都由框架处理。（我不知道keydown事件有任何跨浏览器问题，但jQuery处理设置事件处理程序和选择正确元素的差异。

正如RobG在他的回答中所说，keydown（和keyup事件）是不够的，因为粘贴。另一种方法是计算和检查何时从textarea中删除焦点：

$('textarea.limitedlength').blur(function () { });

Answer 2

使用键事件检查textarea内容的问题在于还有其他输入文本的方法，例如粘贴或拖动。许多人使用 setInterval 或 setTimeout 来检查内容并不时更新计数（比如50ms），但这种方法在计算上效率低下。只有当textarea具有焦点时，您才可以使计时器运行。

当表单控件输入时，还会触发HTML5 input事件类型：

<textarea oninput="document.getElementById('msg').innerHTML = this.value.length;">
</textarea>
<div id="msg"></div>

但当然并非所有浏览器都支持。

Answer 3

除非你需要附加多个事件监听器，否则这样可以正常工作：

element.onkeydown = function(e)
{
    e = e || window.event;
    ...
}

如何在Javascript中将事件连接到HTML元素？

3 个答案: