使函数仅在活动/聚焦输入/按钮/文本区域上工作的 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>

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

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() 方法为代码中显示的其他事件分配处理程序。

Answer 2

我的建议是为此使用属性选择器 $('input[id^="dataInput_"]') 并以这种方式使用 jQuery 的 .on() 处理程序：

$('input[id^="dataInput_"]').on({
    focus: function{
       functionOne($(this));
    },
    blur:  function(){
       functionTwo($(this));
    },
    keyup: function(){
       functionThree($(this));
    }
});

和功能：

functionOne(obj){
   console.log(obj.val());
}
functionTwo(obj){
   console.log(obj.val());
}
functionThree(obj){
   console.log(obj.val());
}