Menu
I have an input field for the price.
It must be like this: [560 $]
To deal with the dollar I get rid of it every time the user clicks on input like this:
1) Checking that border color is not ‘black’ (it is black if the user clicked on it already).
2) Getting the value of the input
3) Getting rid of ‘ $’ in the end.
4) Returning the value without the dollar
5) Changing border color to indicate that we are in “write mode” so that there is no dollar in the input.
6) All set up to enter numeric values.
`$(“#slider-input-from”).click(function(){
if ($(“#slider-input-from”).css(“border”) != “0.8px solid rgb(0, 0, 0)”) {
str = $(“#slider-input-from”).val()
str = str.slice(0, str.length – 2);
$(“#slider-input-from”).val(str);
//$(“#slider-input-from”).css(“color”,”#666666″);
$(“#slider-input-from”).css(“border”,”0.8px solid #000000″);
}
}) ;
`
To put the dollar back I do this:
1) Check if the mouse clicked somewhere else (not on this input).
2) Checking that there is no ‘ $’ just in case
3) Adding the ‘ $’ in the end
4) Changing back the border-color
`$(document).mouseup(function (e){
if (!$(“#slider-input-from”).is(e.target)) {
str = $(“#slider-input-from”).val()
str = str.slice(str.length – 2, str.length);
if (str != ” $”) {
str = $(“#slider-input-from”).val();
str += ” $”;
$(“#slider-input-from”).val(str);
$(“#slider-input-from”).css(“border”,”0.6px solid #D5D5D5″);
}
}
});
`
As you can see, I am using not only numeric values in the input because there is a space and a dollar in the end.
So I can’t assign input type to ‘number’. It must be kept as ‘text’.
But there is a concern about entering letters right into the price value.
I was trying to do something like:
1) I am getting the value from the input
2) I am using a function to check the value
3) If the function finds any non-numeric characters it gets rid of them
4) Function returns the checked value
5) Value gets inserted back into the input
`
$(“#slider-input-from”).keyup(function(){
value_from = $(“#slider-input-from”).val();
value_from = check_price_slider_value(value_from);
value_to = $(“#slider-input-to”).val();
value_to = check_price_slider_value(value_to);
$(“#slider-input-from”).val(value_from);
$(“#slider-input-to”).val(value_to);
$(“.js-range-slider”).data(“ionRangeSlider”).update({
from: value_from,
to: value_to,
});
});
function check_price_slider_value(str) {
ints = [‘0′,’1′,’2′,’3′,’4′,’5′,’6′,’7′,’8′,’9’];
for (i = 0; i < str.length-2; i++) {
if (ints.includes(str[i])) {
// acceptable character
}
else {
// not acceptable character
str = str.replace(str[i],”);
}
}
return str;
}
`
The problem that I am facing is that the non-numeric character will get erased only after like 0.2seconds. And I want it erased immediately without even seeing it. So the perfect choice for me would be input type=”number” but I can’t use this option. I also thought about kewdown event rather that keyup, but then the last character will always be missed as it gets into the input after the check was performed already.
Thank you very much if anyone could help!