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