auto fired the text field once the value reach the certain length - javascript

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.

Related

How to prevent input/textinput event from firing when input with an input method?

I'm trying to catch the value of an input element every time its value changed. change requires blurring the element so it is not good for my case. I came across this Javascript change event on input element fires on only losing focus question and the accepted answer solved my problem, partly. According to the fiddle the event I should be watching is
$('#name').bind('DOMAttrModified textInput input change keypress paste focus', function () {
.....
})
However it doesn't work so well with characters that require an input method to input. For example, to input Chinese character "長", I'd press "c","h","a","n",“g” and then "space", all these keystrokes are recorded and will fire the events unwantedly - I only want to catch "長" as the input value, and the trigger should only fire when this character appears in the input textbox.
I've tried different combinations of the events, but none of them works. Is there any way to work this around?

Input type=email's change event is not firing when the value entered is whitespace

I've added an on 'change' event listener to a type=email input element. When I add a couple space characters into the email field, then lose focus on that element, the change event doesn't seem to be firing.
However, this exact scenario works just fine with type=text input elements.
What's going on?
$('input[type="email"]').change(e => {
console.log('Triggered!');
});
Browser: Chrome Version 63.0.3239.132 (Official Build) (64-bit)
I originally said that it looks like there is an automatic trim operation performed on email fields because the length of the value is coming back at 0 after typing some spaces and leaving the field, but upon returning to the field, the spaces remain in the element, so they aren't getting trimmed out.
I suspect that, because spaces are not valid for this input type, they are not considered part of the value, thus the value doesn't change when you enter them and the change event doesn't fire.
Type some spaces in the field and then hit TAB to leave the field, but then return to the field. The spaces will still be there.
$('input[type="email"]').on("blur", function(e){
console.log(this.value.length);
});
$('input[type="email"]').on("change", function(e){
console.log("Change fired!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="email">
You can use something like that:
$('input[type="email"]').on('focusout', {
console.log('Triggered!');
var $trig = $(this);
$trig.attr('trimmed', $trig.val().toString().trim());
$trig.val( '').val($trig.attr('trimmed'));
});
But, as answered above, input[type="email"] does not count whitespaces. It is only works as fast hack;
I am facing the same problem with React, and I don't want to reflect the error on the onBlur event (as other solutions here). I don't think an error should be reflected in any input by the simple fact of removing the mouse from that input. For me that's not User friendly,... AT ALL.
Why?
Because the User might have decided to remove the mouse from that
Input only because he/she simply wants to copy something from somewhere else first,... and then past it there (and/or to past it somewhere else). So technically there is no mistake there yet.
Because I simply want to fill another input field of the form first.
Why? Becase that's precisely the field's value I already copied from
somewhere else, so that's the value I have stored in clipboard, and
it doesn't goes where my mouse landed by default. Or simply because
I just want to! I'm the User, so I can choose the order to
fill the form!
For me is more than enough with validating what the User has written and/or removed/deleted from the Inputs (onChange validation) AND also what the User finally decides to send (onSubmit validation). A proper combination of onChange and onSubmit validation is the perfect healthy balance between thoroughness and User friendly.
A Solomonic "solution":
I am using a custom validation hook. As I can not change the behavior of the input with a type email regarding the white spaces in an OnChange event,... then I decided to use a workaround, which is simply avoiding the typing of white spaces and that's it, as the onChange event won't trigger anyway.
const preventWhiteSpaceOnKeyDown = (e) => {
if (e.key === " ") {
e.preventDefault();
}
}
.
.
.
<input
type={"email"}
id='commentEmail'
name='commentEmail'
required={true}
autoFocus={true}
ref={emailInputRef}
value={emailState}
onChange={emailInputChangeHandler}
onKeyDown={preventWhiteSpaceOnKeyDown}
/>
This is not a "solution". There is no clean solution for this. But after this at least my input[type=email] element won't hold useless white spaces.
input[type="email"] does not fire change event, use blur event instead:
$('input[type="email"]').blur(function(){
console.log('blur event is fired.');
});

Enter keyup event in japanese input

I've an input field on which I'm listening to keyup events.
Using the Japanese input method I start typing characters and the event doesn't get triggered; which is expected as the enter characters are being converted to hiragana and a drop down appears so the user can select the katakana or kanji version of them. While the user is typing the characters appear underlined and the user can select it's choice (kanas/kanji) by pressing enter. After that the text is no longer underlined and is 'commited' to the input text.
This behavior is expected as is how the input method is intended to work.
However, I wasn't expecting to receive any keyup events until the text has been commited (an even then I would expect a change event no a keyup), since that enter is part of how the input method works.
I'm listening to keyup events because I need to trigger an action when the user releases the enter key.
I have analyzed event data when typing an enter in western and japanese input method and didn't find any relevant difference.
Which is the proper way to deal with that?
Regards
You can achieve this with the following technique:
Use textarea instead of input
Use an onInput listener instead of onKeyDown
Detect newlines in onInput
The relevant JavaScript code:
function onInput(evt) {
let val = evt.target.value;
const nlAt = val.indexOf('\n');
if (nlAt >= 0) {
// A newline was detected in the input!
// Remove the newline from the field:
val = val.replace(/\n/g, '');
evt.target.value = val;
// And fire our custom onReturnKey handler:
onReturnKey(val);
}
}
You can try this CodePen.

jQuery check if input field characters are highlighted

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/

alert and autorefresh text box if length is 4

I have one text box and i am entering data on that text box, what i want to do is: if i will enter 4 characters and will skip that text box by pressing TAB key then one alert will come as"data should be more than 4 characters" and then text box will be auto refreshed. If data entered is more than 4 characters then no alert will come, I was trying by onkeyup event but some where i am doing wrong. Any help please
I don't know what you mean by "then text box will be auto refreshed", so I'm going to guess that you want to put the cursor back into that field. As far as checking the length of the value when tabbing out you want the .change() or .blur() event:
$("input[type=text]").change(function() {
if (this.value.length <= 4) {
alert("Please enter more than 4 characters.");
this.focus();
return false;
}
});
Demo: http://jsfiddle.net/XHKRh/
The blur event will be triggered every time the focus leaves the field; the change event will not be triggered again if the user immediately tabs out of the field again without changing it. I prefer to use change in combination with an additional validation on form submit, so that the user doesn't keep getting pestered with alerts (though actually I wouldn't show an alert at all, I'd put the message on the page next to the field).
How about on blur?
var el = $('#textbox').blur(function(e) {
if (el.val().length > 4) {
return;
}
el.focus();
alert('data should be more than 4 characters');
});
Note that this technique makes for a poor user experience. Showing a message inline with your element would be preferable to preventing the user from interacting with anything else.
There are some points that might result you interesting:
You shouldn't rely ONLY on JavaScript to validate forms, as users can turn it
off and bypass the validation
There is a maxlength property for inputs
You are probably looking for onblur instead of getting the TAB key action, since users
can change focus in other ways

Categories