Background
I have a page that has 3 input elements which takes currency numbers
These input element of type number with jQuery handles which letting up to 2 decimal placing. If user tries to input 3rd decimal, it does not print which is great.
However...
Issue
When input already has valid 2d.p input such as 12.11 and wishes to highlight the field characters (such as click drag highlight to blue) to change/overwrite all, the jQuery handler think that its 3rd decimal input and does not print BUT what it actually needs to do is to overwrite the whole and start from the beginning.
So
Is there a way to check if the input field characters are highlighted?
I know that there is a way around this if my input has type="text" and just use selectionStart and selectionEnd BUT I want to keep it as type="number".
Code: jsfiddle DEMO
Any other suggestion to jQuery code handling 2 decimal place, I would appreciate
If I am understanding your issue correctly, try the following minimal update to detect if the user has 'highlighted' the input value:
if (CharAfterdot > 3 && !window.getSelection().toString()) { return false; }
So if a 'selection' is found via the above method (not empty / undefined) the code allows further input (in your case overriding via highlight).
Updated fiddle:
https://jsfiddle.net/qtr30w05/3/
Related
My goal is to have a numeric field that validates as the user types, but it seems that validation only runs after the user leaves the cell.
Is it is possible to start cell validation when the user types, and continue refresh it again as the user continues to type or edit the field.
In the example below from v4.9 examples I have edited a numeric field and then left the cell once, which correctly gives an error.
But if I renter the cell and correct it to a positive number without letters, it will still show the red validation border while editing until I leave the cell.
What I would like is to have the validation re-run on each character
edit, so the border color will then update as you edit, and the user will know the value can be accepted before leaving the cell.
I would also like
to prevent any entry into the cell other than a decimal
number (ie. only one decimal point and only numeric characters so that the letter e can never appear in the cell), but
have not found the answer yet. The numeric format appears to be for
integers and shows step arrows at end, so not suitable for numbers with 1 or 2 decimal places.
Can anyone point me in the right directions?
Do a Custom Editor that validates on each keypress
I was wondering if there is a way to fill the input fields having type text and have inbuilt js event to evaluate what is being entered means, when a user types in any number it evaluates and checks the type of card and also put automatic spaces in between. But while setting the value with javascript i.e. element.value = 'xxxxxxxx'; the formatting doesn't happen and the site evaluates the card number invalid. so how to programmatically achieve this. I am working on an extension which could auto fill card details.
I have tried using element.dispatchEvent(Keyboardevent) but it won't work.
the website on which i am trying is made on top of angular.
I have found a workaround. It was something like changing the value and then dispatching an event. Since I was working with angular I needed to dispatch input event. Related codes are:
element.value = 'anything';
//dispatching input event after setting value ( tested for angular)
element.dispatchEvent(new Event('input')) ;
I have a dynamic JavaScript rules engine in which based on criteria such as a dropdown is not changed, then I prevent any characters from being entered with:
$(document).on('keypress',"[id^="+condtionID+"]", function(event){
event.preventDefault();
});
However, if I change the dropdown to a value which does allow for any character, the textbox refuses to then allow for input.
Examples of IDs:
Select: ID="selectNumber435"
Input: ID="condtionID435"
Every row dynamically created into the table ends with the same random number created.
Problem is that once I do not allow any input, I tried:
return true; did not work
Even another condition in which I only allow numeric, I change to a dropdown value that allows for all input and it "holds on to" thinking it should ONLY allow numeric.
I would prefer to not have to make the user delete the dynamically created row, there has to be a way to allow for typing characters into the input box again. Some sort of "Reset" ...
You can simply dettach the attached event:
$(document).off('keypress',"[id^="+condtionID+"]");
I want to know there is any code that user can't input multiple dots in same text box, like that:
0.0.01
If they entered 0.1 then its not allow to again enter any dots in input field.
If this is in Winforms, then just check in the TextChanged event. Simply check if the last character entered is a ".". If it is, and there is a second "." in the TextBox already, then you just delete the last dot.
The following should work
use onKeyPress event in javascript
count the no. of dots in the value
if no. of dots is more than one then set event.keyCode value to 8 (key code for backspace)
Now I am developing a bar code based attendance system . Any there any javascript event can solve once the text field has detected the value has 10 characters, the text field will be fired and i can able to get the value.
Is there any solution ?
I'm not sure what you mean by "the text field will be fired", but you can find out when the 10th character is entered by binding to the keyup event:
document.getElementById("example").onkeyup = function() {
if(this.value.length === 10) {
console.log("ok");
}
};
It would be better to use addEventListener or attachEvent rather than setting the onkeyup property, but I'll leave that up to you.
Here's a working example.
you can check the length of the text input box value on every keypress and make a function call when its the 10th character.