How to call multiple ID's in one function?-CodePudding

I've found this function that allows me to do what I want, but since I have many inputs, and I don't want to use this JS on all of them, I would like to call it only on couple of inputs. Can I do that by ID or something?

( I know that this sentence isn't one of the best, but I'm in a hurry, sorry)

var pastValue, pastSelectionStart, pastSelectionEnd;

$("input").on("keydown", function() {
    pastValue          = this.value;
    pastSelectionStart = this.selectionStart;
    pastSelectionEnd   = this.selectionEnd;
}).on("input propertychange", function() {
    var regex = /^(100|(\d|[1-9]\d)(\.\d{0,2})?)$/;
                    
    if (this.value.length > 0 && !regex.test(this.value)) {
        this.value          = pastValue;
        this.selectionStart = pastSelectionStart;
        this.selectionEnd   = pastSelectionEnd;
    }
});

CodePudding user response：

I'll post a jQuery alternative - since you've posted jQuery in your question code.

You just swap the CSS selector for an input element with the CSS selector for your specific element IDs, like so:

var pastValue, pastSelectionStart, pastSelectionEnd;

$("#myID1, #myID2, #myID3").on("keydown", function() {
    pastValue          = this.value;
    pastSelectionStart = this.selectionStart;
    pastSelectionEnd   = this.selectionEnd;
}).on("input propertychange", function() {
    var regex = /^(100|(\d|[1-9]\d)(\.\d{0,2})?)$/;
                    
    if (this.value.length > 0 && !regex.test(this.value)) {
        this.value          = pastValue;
        this.selectionStart = pastSelectionStart;
        this.selectionEnd   = pastSelectionEnd;
    }
});

CodePudding user response：

You can set same class name to all your inputs and then get them with getElementsByClassName(). You will get array of them. Later with using for() apply your function to all them.

CodePudding user response：

Actually setting class on every input you want access would help, then accessing them using getElementsByClassName then you will add your event listener to all needed input.

const myInputs = document.getElementsByClassName("myInputs");
// consider myInputs as the class I gave to wanted inputs
myInputs.forEach(input=>{
input.addEventListener('click', functionHandler);
// functionHandler is the function where you will put your logic
})

Hope this is going to be helpful

CodePudding user response：

Give .inputTest class to all your inputs

var inputs = $(".inputTest");
for (var obj of inputs) {
  var pastValue, pastSelectionStart, pastSelectionEnd;
  obj
    .on("keydown", function () {
      pastValue = this.value;
      pastSelectionStart = this.selectionStart;
      pastSelectionEnd = this.selectionEnd;
    })
    .on("input propertychange", function () {
      var regex = /^(100|(\d|[1-9]\d)(\.\d{0,2})?)$/;

      if (this.value.length > 0 && !regex.test(this.value)) {
        this.value = pastValue;
        this.selectionStart = pastSelectionStart;
        this.selectionEnd = pastSelectionEnd;
      }
    });
}