javascript - 使函数仅在事件/聚焦的输入/按钮/文本区域上工作的 jQuery 或 javaScript 语法是什么？

Question

我是一名初学者且对自己感兴趣的网络程序员。

我一直在测试、询问、重新测试、尝试、阅读 javaScript 中的不同功能解决方案，并将其形成在线表单，该表单将包含大量 <textarea>'s一旦我完成了。

对于当前的函数状态，我相当满意，这些函数基于几个 js 事件。示例代码如下(写得有趣，因此在论坛中更容易阅读，实际代码显然是一行):

<textarea
    data-id="0"
    class="classOne classTwo"
    id="dataInput_0"
    name="xInput_row_1"
        onFocus="functionOne();"
        onBlur="functionTwo();"
        onKeyUp="functionThree();">
</textarea>

我构建并测试了专门在 id="dataInput_0" 上工作的所有函数。使用getElementById 。示例:

var d = document.getElementById("dataInput_0");

所以我的问题是如何让函数触发其他 "dataInput" ID？

换句话说:

var d = document.getElementById('whichever dataInput that is active/focused');

谢谢!

Answer 1

使用当前代码的最简单方法是执行以下操作:

onFocus="functionOne(this);"

...然后定义你的函数:

function functionOne(el) {
   // el is the element in question, used e.g.:
   alert(el.name);
}

在 onFocus=... 中，浏览器将 this 设置为相关元素，以便您可以将其作为参数传递给您的函数。然后，您的函数只需直接使用它，而不必通过 getElementById()。

但是既然您提到了 jQuery，您可以从 html 中删除内联 onFocus 和其他 onXYZ 处理程序，然后在 JS 中完成所有操作，如下所示:

$("textarea").focus(function() {
   // here this is the element in question, e.g.:
   alert(this.value);
});

这为页面上的所有文本区域定义了一个焦点处理程序 - 将其范围缩小到仅具有“classOne”类的文本区域，执行 $("textarea.classOne")。在函数中，this 指的是焦点元素。您可以使用 .blur() 和 keyup() 方法为代码中显示的其他事件分配处理程序。