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.
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)
How to show numpad on mobile without using input type number/tel?
I have looked into this, but can't seem to find anything. I have an input that I cannot make into a number input because of some validations I'm doing. I was wondering how to show a numpad without using the input type number/tel?
In an ideal world, the this is exactly what the inputmode attribute would let you do.
User agents can support the inputmode attribute on form controls (such
as the value of textarea elements), or in elements in an editing host
(e.g., using contenteditable).
The inputmode content attribute is an enumerated attribute that
specifies what kind of input mechanism would be most helpful for users
entering content.
You would use it like this:
<input type="text" inputmode="numeric">
However, as of right now, it has limited support only being available in some of the most recent versions of Chrome and Chrome for mobile.
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 a requirement that a custom entity 'Priority' is selected on the case form but rather than using the normal lookup method, I want to display a picklist with the priority entitys listed.
One solution I have come up with is to have the lookup field on the form as normal but not set to visible and have a jscript routine add a select to the DOM looking up the required values at using a JSON request. On the selected changed event of the custom select, I can programatically set the value of the lookup.
The problem with this is it's quite messy and not supported.
Is there is a supported way to do what I want and if not, can anyone see any issues with the solution provided?
Settings the value of a lookup with javascript is supported. Custom html controls are suported as web resources. Your solution will work and actually is a supported customization.
As for your other options...
Presumably this request stems from the users thinking it takes "too many clicks and too much time" to select from such a short list of Priority entities. Is it possible your requirements are negotiable? Are your users aware of all two nice features of the lookup: 1. you can type the first few letters of the Priority's name and tab out, and it will auto-complete for you. 2. Similarily you can type just the first couple letters and a dropdown will expand below the lookup with the available options. Its quite fast and you dont need to load a seperate screen which I am assuming is their usability concern.
Alternatively, if they are dead-set on the dropdown, can this Priority data be represented as an optionset? I'm a bit suprised that you needed an entity for Priority concerns, what metadata about priority do you need?
Firefox remembers what you have so far entered in a given text input and as soon as you start typing it suggests previous values matching what you have typed so far.
Is it possible to access this list via javascript?
Thanks.
Firefox remembers what you have so far
entered in a given text input and as
soon as you start typing it suggests
previous values matching what you have
typed so far.
This features is there with the browser itself.
Is it possible to access this list via
javascript?
I am afraid, that's not possible
No that is not possible, that information is private to the user.
If it was possible, you could just put a textbox with the name "email" or "password" on a page, and start harvesting whatever people wrote in such textboxes on other sites.
Even if you limit the access to the same site, people doesn't always want to be associated with what they did earlier. If I for example accidentally made a search for something that happens to be urban slang for something else, I don't want "relevant ads" to follow me.