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!

As an aside, `$(this).addClass("InFocus");` is all you need in your focus handler; `$(this).removeClass("InFocus");` is all you need in your blur handler. But I'd suggest removing the code for those handlers from this question, because they're working and unrelated to the problem you're actually asking about. Note also that `indexOf()` returns `-1` if the specified string isn't found. — nnnnnn, Apr 21 '13 at 07:09

score 0 · Accepted Answer · answered Apr 21 '13 at 10:49

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;
}
})

Thanks @paulitto, I am not quite there yet. the solution and syntax you provided was great but it only works, from what I can see if I paste in #dataInput_0. I am getting warmer with this: `else if (x.indexOf('\t') > 0) { var delimiterT = x.split('\t'); var di = $(this).attr('data-id'); for (var i = 0; i <= delimiterT.length ; i++) $("#dataInput_" + di[i]).val(delimiterT[i]);` — brian-welch, Apr 21 '13 at 11:36

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

1 Answers1