This is for an application using AngularJS (if it matters).
I'm looking for a way to add some sort of a "template" to a HTML input field, much like a placeholder. See, I have this date-field, in which the user can type the date, or he can use a datepicker to select the date.
I currently have an HTML input field with a placeholder: "dd/MM/yyyy", which shows the format in which the date should be entered. now what I would like is a kind of placeholder that stays while the user types - and possibly even limits the users options (for instance: only numbers are allowed, nothing else is possible).
Ideally, the placeholder should stay while the user types so he can see what the format is while he is typing. The user should (if possible) also be restricted from typing any not allowed characters.
Does anyone know of any already-existing solutions to this use case? I've been searching for a while now but don't seem to be using the right words ...
Addition: I know I still have to check the user's input server side. I'm not relying on JS for the validation of the date.
You can look at this: http://forza.ndevrstudios.com/#/form-masks
It's done with latest angular-ui (http://angular-ui.github.io/ui-utils/) and something like this in your input field:
ui-mask="99/99/9999" model-view-value="true"
Related
The date picker doesn't show up even though i use
<input type="date" name="dob" required>
Additional information that might help you help me :
It is in a JSP file
I'm using tomcat v7.0
I need to validate the date without using JavaScript?
I tried using text for input and setting a specified format but then how can I add range there? (min max and dynamic for February issues?)
Can this issue be addressed by using combobox? How can I change value options of one combo box depending on the other? (Date options dependent on month and/or year)
Any help is highly appreciated.
P.S. Since it is a part of a registration form, I have been advised against using JavaScript validation (as it can be disabled)
Edit : I guess I'll go with a regular expression. I found one here, the second answer to this question : Regular Expression to match valid dates
The date picker doesn't show up
It does when I test it. Perhaps you are using a browser which does not support it.
I tried using text for input and setting a specified format but then how can I add range there?
If by "format" you mean a pattern, then you would need a complex regular expression that had multiple parts.
e.g. 0 followed by 1-9, or 1 followed by 0-9, or 2 followed by 0-8 followed by / followed by 02 followed by (leap year logic).
It wouldn't be short or pretty.
Regular expressions do not lend themselves to describing the format of dates.
That said, see this question.
Can this issue be addressed by using combobox?
You can't have a combobox in HTML without using JavaScript, which you ruled out.
If you mean "a collection of select elements" then that would be "dropdown menus" not "a combobox".
You could use those, but there's no good way to stop people entering dates like the 31st of February.
How can I change value options of one combo box depending on the other?
Only with JavaScript, which you ruled out.
Since it is a part of a registration form, I have been advised against using JavaScript validation (as it can be disabled)
You shouldn't depend on JavaScript for input validation because it can be bypassed… but that is true of any client-side input validation you might implement.
Client-side input checking is useful because it can give users rapid feedback if they make a mistake and enter data which doesn't make sense.
You need to accompany it with server-side input checking in order to prevent bad data being inserted into your system deliberately.
I'm not quite sure exactly what to search for or where exactly to start, but I'm trying to see if it's possible to have a customized search box for multiple GET queries simply using jQuery, JS, HTML and CSS.
The user would first type in something which will prompt the red box to show (key) and it would autofill with a listed default given the first few characters they typed. Then upon pressing enter or tab, they would be allowed to fill in the answer gray box (value). Then after, they can either choose to submit or put in another key / value.
Is there a jQuery library that already has this implemented, and is this even possible? I thought about putting input boxes inside the input search box and using jQuery to hide and show them depending on what they type, but is that the best way?
I'd like to do this without comprehensive framework / library like Angular and React.
Thanks in advance!
You must handle it with one of JavaScript freamworks like Vue.js, React.js or Angular.js
I have an application with an input field that takes a dollar value. I need to change the way this dollar value displays so that the number is formatted with a $ and commas, like $5,550.00 if the user just enters 5550.
I found a way to do this, but doing so causes all hell to break loose in the code that uses the value from this field--it does a bunch of stuff, including database updates that break if given $5,550.00 instead of 5550.
There is a TON of underlying code and I am not empowered to go fix it all. I need to figure out a way to display this value to the user as $5,550.00 but keep the underlying value as 5550.
Any suggestions?
Use 2 text inputs. A "façade" one that the user sees, and a "real" one which is actually submitted to the server with the form. When the user enters text into the visible input, you can use JavaScript to set whatever corresponding value you want into the "real" (hidden) input. That effectively decouples the displayed value from the submitted one. You can even use a plugin such as jQuery Masked Input to do the front-end number formatting for you.
Make sure to only apply this when JS is enabled in the browser, otherwise your form will be broken with JS disabled.
If you are talking about an HTML form, I would submit the form using javascript.
You could revert the value back to unformatted before submitting the form.
The text input field appears to support the Ctrl+Z (undo) fully.
The number and date input field only supports it, if the value has been typed into the field in question. If, however, it was selected by means of the associated helper control (i.e. the range control for the number fields and the calendar control for the date fields), then Ctrl+Z does not work.
Can anyone advice how to make the number and date fields support Ctrl+Z no matter how the value is entered by the user?
Thanks.
P.S.
I am currently using jquery and chrome.
EDIT1
I am using <input type='number' ... and <input type='date' ... It is entirely possible that I should use something else (what?)
EDIT2
I am talking about interactive actions only, not script based changes.
Undo is a weak spot in HTML5 applications. There is no simple solution because undo is ultimately application dependent (just like in desktop apps).
See this question for some solutions: Implementing undo in a web app
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.