I know there is a pattern a attribute for html5 input tag, but this help to validate the field after the user has entered the value.
The request here is to prevent the user to type something wrong, instead of correct it after. I'm not interested to discuss if it's better or not - it's just the request.
I also know I could add an event listener for keyPress event and decide which chars accept.
But all the examples I saw are not cross-browser compatible (I'm interested at least in FF, Chrome, in both desktop and mobile versions) and they fails because the user can enter "----" or "....".
What could be a reliable, robust, cross-browser regexp pattern to allow the user to type:
any number [0..9]
only one decimal point ('.' or ',' converter to the first one)
a specified number of decimals (i.e. numbers after the decimal point)
optional only one sign symbol ('+' or '-') as first char
common text commands: arrow keys, copy/cut/paste, backspace, delete, enter
It's better without the use of jQuery - because I should add it only for this goal.
"The request here is to prevent the user" -- don't do that.
If I am typing my name, but my finger slips when typing the i and I hit the 8 key too... no big deal, I just hit backspace, right?
Well, with your idea, wrong. Your name input would disallow numbers, so the accidental 8 wouldn't appear, and the backspace would erase the i instead.
In your question you appear to be seeking a numeric input (have you considered <input type="number" />?) so the finger-slip could apply to the * key when trying to input a 9. Whatever your input the same idea applies.
Always allow the user to type whatever they want. When they are done typing (either onchange of the element or onsubmit of the form), then you tell them "hey, this thing you typed doesn't seem right."
Therefore, the behaviour provided by browsers supporting input[pattern] is correct, and should not be changed.
Related
How can I create a input text in React with placeholder as DD-MM-YYYY,
when I start typing the value, the placeholder should be removed partially.
For eg if I type 02-MM-YYYY(in this case -MM-YYYY should be visible part of the placeholder)
The pattern you are describing is an input mask, so you might have more luck searching for this than placeholder.
First of all, have you considered using <input type="date">? Most browsers also provide an input mask for this kind of input.
If this doesn’t help you, HTML does not provide input mask functionality natively, so you will need to find a library that does that for you.
As always, you should clarify your basic requirements before choosing a library from npm. Most notably, it should be accessible for users with disabilities. Input masks seemingly improve user experience, but they are hard to get right. If not done well, they actually render the user’s experience worse.
Things the input should still support with input mask applied:
(Copying and) Pasting the value from elsewhere
Autofill by the browser (for your birthdate, for example)
Screen readers announce the value correctly
Correcting the value by means of keyboard only, for example deleting one number in the middle
The pattern adjusts with the locale (language)
I'm trying to set some validation for an input field. It is working fine everywhere except on iOS.
Here's some example code but the are two points to consider:
It must be a type="text" input because I need to allow the user to type
special characters like - and /
I made some regex to handle the input validation but for the sake of
simplicity I'm omitting it from the snippet.
https://codesandbox.io/s/youthful-morning-gjjsq
The original code is from a React project with Redux so I reproduced the same logic with both state management from React and from Redux to make clear the problem is not coming from neither of them. In the example I set the if-else conditional to allow any value less or equal to 20 to be displayed in the input fields and, as I said, it works OK. Nothing fancy, it's just to demonstrate that when the value is greater than 20, or when is not even a numeric value, the input field won't get updated. But whatever the reason, for iOS when, specifically, the dash (or minus) character is inserted in the input field the other characters get erased. Try typing 2- or 20- and the characters will disappear. If I try to type other character like / or ?, whatever, the values are not erased though. The desired behavior is to keep the value untouched (i.e. 2 or 20), not delete it.
The problem doesn't happen on Windows and on Android; it's only on iOS no matter the browser (not sure if it happens on Mac too). I tried return false, e.preventDefault(), e.stopPropagation(), e.nativeEvent.stopImmediatePropagation(). None of these worked.
Does anybody could help me with this? Again, the code I provided is just an example based on the original code which I can't reproduce here. I can clarify better if needed.
I am building a web app. I believe it will be easiest if I try to explain what I want the user experience to look like before I ask my question.
I want my user to go on my site and begin to type in a text field. When each character is inputted, I want to run a conditional statement on that character to decided if it should be added to the text field. If the character inputted is not one I want, the character isn't added.
I have validations in my model to do this after the text is submited, but I want it to be real time. I'm guessing this relates to JavaScript and I am not comfortable enough in coding it to know what to search for/research. Can you assist me in where to look (Tutorials, Concepts, etc)?
Thank you for taking the time to read this.
You can do this with the preventDefault method on the event object passed to the keydown event. This basically tells the browser to not preform its default action (which on a text field would be appending the letter to the field).
Here is an implementation using jQuery for brevity, but you can implement the same functionality in pure javascript as well:
$('input').on('keydown', function(event) {
// event.which is the character code
if ( /* some condition */ ) event.preventDefault();
});
And here is a fiddle with an example where you cannot type the letter A: http://jsfiddle.net/354XJ/
It's not precisely your situation but a very good starting point would be this question and its answers: How to allow only numeric (0-9) in HTML inputbox using jQuery?
You are basically looking for javascript that will intercept the keypress and only allow it if it is an allowed key, the question above implements this for numeric keys - start with that and expand it as per your needs.
I have an HTML form with two input textfields.
When the user tabs from the first field to the second, I'd like to automatically switch the user's input method to a different one, say for a different language.
The reason I'm trying to do this is that I expect the user to type content in known different languages in each field.
I tried <input lang="JA" /> but that didn't seem to change the input method on Safari for Mac nor iOS.
Is it possible in HTML or JavaScript to change the input method on a per-textfield basis?
Input methods are controlled by the browser and the user. The lang attribute does not affect this, and there is no other HTML way either. It would not be useful to change the input method on a per-document, still less per-field basis, from the method normally used in the browser and accepted by the user (either silently or by finding out how to control such things).
In some situations, it can be helpful to provide special tools to users—not to override input methods but to offer additional possibilities. For example, if the expected language is written in Latin letters with a few extra letters in addition to the basic a–z, you could have buttons for entering them (to help people using keyboards that have no convenient way to type them).
It is possible to build controls that act as input method editors, see e.g. typd.in for entering Japanese. But this means using something on top of the input methods that the user is using.
I have an input box: input type="text" class="rulerInputText" id="rulerInputBox" readonly
I have Javascript code to detect the selected text and play around with it.
The issue comes when I am allowing the user to actually select text. The text is basic with spaces. When the user begins selecting, there is no issue, but when a space is reached, the user selects it and the next word is automatically selected. Essentially, I want to prevent automatic selection of the entire word. I only want to select exactly what the user wishes to select with the mouse.
Is this possible or do I need to use some sort of crazy Javascript hacks to get this done?
This is a feature of Operating System. The OS provided textbox does auto-selection for better user experience. You do not have any control over here.
(I just confirmed on IE/Windows7)
This is a feature of IE specifically; no other browser has this behaviour. It's a deliberate “smart selection”(*) feature copied from Office, though in newer versions of Office it works less annoyingly, allowing you to revert to character selection if you move the pointer back.
There is as far as I know no way to turn it off in IE, either at the client or server end, because Microsoft think it's such a great feature. Sigh. Even JavaScript hacks don't provide a way round.
About all you could do would be to put invisible spaces between each character, so that IE thought each character was a second word. eg. try selecting:
foo bar bof zot
these have Unicode U+200B ZERO WIDTH SPACE characters between letters. This has side effects though; if the user tries to edit or copy-and-paste the text, they'll get weird invisible characters in the way potentially messing it up.
(*: As usual, “smart” means second-guessing the user, usually getting it wrong, and insisting it's right. aka. “stupid”. Run a mile from anything describing itself as smart.)