What is the correct jQuery syntax for making a function specific to one input apply to all inputs?

Question

This is a continuing issue related to my question [HERE], if you are looking for a little background.

I am a beginner & self interested web coder looking to put functions in jQuery in order to make the functions work in any focused input/element.

I began here, with three functions which worked but only on the <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>

I asked and received good tips and information on how to use jQuery listeners, which would apply the functions to any <textarea> cells with a given class. However I could only figure out how to apply the focus and blur functions as here:

<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>

And the <textarea> code now is:

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

functionThree() is the trick bag here. Because of my limited (non existant?) understanding of syntax, I am having troubles moving the javaScript function to jQuery.

The javaScript function is related to identifying delimiters and splitting data copied from Excel which is then pasted in the multitude of <textarea>s.

Code:

<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>

The j += 4; was because I was presuming an example form with 4 columns. If I had 24 columns, obviously i would be j += 24; to get to the next <textarea> under the focused one.

So the above javaScript works for only ["dataInput_0"], and I am wanting it to work for any focused <textarea>.

What might the correct jQuery syntax be?

Thanks in advance!

Answer 1

you can bind keyup event handler in the similar way, but in your functionThree just use $(this).val() to get textarea value. having jquery you can also get rid of all those getElementById's

$('.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;
}
})