使特定于一个输入的函数适用于所有输入的正确 jQuery 语法是什么？

Question

如果您正在寻找一些背景知识，这是与我的问题 [HERE] 相关的持续问题。

我是一名初学者和对自己感兴趣的网络编码员，希望将函数放入 jQuery 中，以使函数在任何重点输入/元素中工作。

我从这里开始，使用了三个功能，但只在<textarea>：id="dataInput_0"。

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

我询问并收到了有关如何使用 jQuery 侦听器的良好提示和信息，这些侦听器会将函数应用于具有给定类的任何 <textarea> 单元格。但是我只能弄清楚如何应用焦点和模糊功能，如下所示：

<script type="text/javascript">
$(document).ready(function(){
    $('.classOne').keypress(function(e){
        if (e.which == 13) 
        {
            alert ( "message-return key not allowed");
            return false;
        }
    });
    $('.classOne').focus(function() {
        var d = this;
            d.className = d.className + " InFocus";
   });
    $('.classOne').blur(function() {
        var d = this;
            d.className = "classOne";
   });
})
</script>

<textarea> 代码现在是：

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

functionThree() 是这里的技巧包。由于我对语法的理解有限（不存在？），我在将 javaScript 函数移动到 jQuery 时遇到了麻烦。

javaScript 函数与识别分隔符和拆分从 Excel 复制的数据有关，然后将其粘贴到大量 <textarea>s 中。

代码：

<script type="text/javascript">
     function functionThree() {
        var x = document.forms["formName"]["dataInput_0"].value;
        if (x.indexOf('\t') > 0 && x.indexOf('\n') > 0) {
        alert ("Can't paste rows & Columns in blocks, blah, blah, blah message");
        document.forms["formName"]["dataInput_0"].value = "";
        return false;
        }
        else 
         if (x.indexOf('\t') > 0) {
             var delimiterT = x.split('\t');
             for (var i = 0; i < delimiterT.length ; i++)
                document.getElementById("dataInput_" + i).value = (delimiterT[i]);
         }
         else
             if (x.indexOf('\n') > 0) {
                 var delimiterN = x.split('\n');
                 var j = 0;
                 for (var i = 0; i < delimiterN.length ; i++) {

                     document.getElementById("dataInput_" + j).value = (delimiterN[i]);
                     j += 4;
                 }
             }
             else
                 return false;
     }
</script>

j += 4; 是因为我假设了一个有 4 列的示例表单。如果我有 24 列，显然我会是 j += 24; 以到达重点列下的下一个 <textarea>。

所以上面的 javaScript 只适用于 ["dataInput_0"]，我希望它适用于任何专注的 <textarea>。

正确的 jQuery 语法可能是什么？

提前致谢！

Answer 1

您可以以类似的方式绑定 keyup 事件处理程序，但在您的 functionThree 中只需使用 $(this).val() 来获取 textarea 值。有了 jquery，你也可以摆脱所有那些 getElementById 的

$('.classOne').on({ 
keypress: function(){...},
focus: function(){...},
blur: function(){...},
keyup:function(){
var x = $(this).val();
    if (x.indexOf('\t') > 0 && x.indexOf('\n') > 0) {
    alert ("Can't paste rows & Columns in blocks, blah, blah, blah message");
    $(this).val("");
    return false;
    }
    else 
     if (x.indexOf('\t') > 0) {
         var delimiterT = x.split('\t');
         for (var i = 0; i < delimiterT.length ; i++)
            $("#dataInput_" + i).val(delimiterT[i]);
     }
     else
         if (x.indexOf('\n') > 0) {
             var delimiterN = x.split('\n');
             var j = 0;
             for (var i = 0; i < delimiterN.length ; i++) {

                 $("#dataInput_" + j).val(delimiterN[i]);
                 j += 4;
             }
         }
         else
             return false;
}
})