What is the jQuery or javaScript syntax to make fu

问题:

I am a beginner & self interested web coder.

I have been testing, asking, retesting, trying, reading up on different functionality solutions in javaScript to an online form which will consist of a multitude of <textarea>'s once I am done.

I am fairly ok, with the current state of functions, which are based upon several js events. Example code would be (written funny so it is easier to read in the forum, actual code is one line obviously):

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

I built and tested all the functions to work specifically on the id="dataInput_0" using getElementById. Example:

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

So my question is how to I make the functions trigger for other "dataInput" id's?

In other words:

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

Thanks!

回答1:

The simplest way to work with your current code would be to do this:

onFocus="functionOne(this);"

...and then define your function:

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

Within the onFocus=... the browser sets this to the element in question, so you can then pass it as a parameter to your function. Your function then just uses it directly rather than having to go via getElementById().

But since you mentioned jQuery, you could remove the inline onFocus and other onXYZ handlers from your html and just do it all in your JS as follows:

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

That defines a focus handler for all textareas on the page - to narrow it down to just textareas with class "classOne" do $("textarea.classOne"). Within the function this refers to the focused element. You could use the .blur() and keyup() methods to assign handlers for the other events shown in your code.

回答2:

My suggestion is to use attribute selector $('input[id^="dataInput_"]') for this and use the jQuery's .on() handler this way:

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

and the functions:

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