i am creating a web page for mobile devices. In that there are few input fields which require user to always enter data in uppercase.
I looked at few options like
text-transform property of css
It changes user input to uppercase but it also changes the placeholder. That doesn't looks good.
autocapitalize attribute for input
By setting it on, it allows keyboard to open in caps. But this doesn't seems to work for me. It works perfectly with textarea but not with input in android.
Is there any better way to achieve this?
try adding autocapitalize="characters" to input, it worked for me on Android, and it should work on other kind of devices as MDN web docs says here:
The autocapitalize attribute doesn’t affect behavior when typing on
a physical keyboard. Instead, it affects the behavior of other input
mechanisms, such as virtual keyboards on mobile devices and voice
input.
You should be able to bind to a keydown or keypress event (I'd use jQuery) and modify the input.
It won't affect the soft keyboard; maybe you can use this along with autocapitalize?
So just to add some more information for future users, here is an example where all displayed text will be in caps and the virtual keyboard will also show in all caps.
Note that custom keyboards like swift apparently do not work but the builti in ones do.
Changes are done through inputProps
<TextField
name={props.name}
value={props.val}
inputProps={{autocapitalize:"characters", textTransform:"uppercase"}}
onChange={props.doStuff}
/>
Related
I am still a javascript beginner and tried to integrate the virtual keyboard into my project. This already worked without problems, unfortunately I have the problem as soon as I use an input via this keyboard in my input field type Search that the search does not work. If I enter the input directly with my keyboard the search works fine. What can be the reason for this? Also when I use the virtual keyboard to enter an input the -webkit-search-cancel-button doesn't work either or is only displayed when I move the mouse over this area.
<input type="search" placeholder="Searchbar">
Code example: https://codepen.io/siad/pen/jOYLJVW
Unfortunately, I have not yet been able to find the error for this.
I have an input type email.
<form>
E-mail:
<input type="email" name="email">
</form>
As soon as the user start typing, I would like to give them the option of most popular emails. Ex. #gmail.com ...
See the image below for details.
How would one go about and implement something like this?
Is there any plug-in or framework that help me achieve this kind of task?
Will HTML/CSS/JS have the ability to do that or only swift2 can ?
QuickType is part of the built-in iOS keyboard, and here is no way to access and/or modify it with JavaScript from a simple website. Unfortunately, you can't even detect the keyboard's height, and position some fake QuickType-like buttons over the keyboard, because the keyboard animates up from the bottom, over the current application without resizing or moving anything.
I'm afraid your only option is to add these as small buttons under the input, or maybe you can create something similar to the iOS copy/paste menu, that becomes visible, when the user starts typing in the input, and append the email endings on a click/touch.
I agree with #frzsombor, but I can think of a different workaround. It would take a lot of code though, so it might not be worth it. Anyway, what you could do is periodically take a screenshot and check for one of the colors on the keyboard in a certain position, maybe #ACB3BB (the return button color). If it is there, you could display another Quick Type Bar above the built-in one. The only problem would be if an update to iOS changes what the bar looks like, but you could always update your website. Another possible way to detect the keyboard is here. I think you need jQuery for that, though...
I'm aware there are multiple input types that force different keyboard layouts on mobile devices. Is there an input type or other attribute that will force the input to open to emoji keyboard on focus?
I don't believe there is, as emoji is technically another language keyboard. But I'd love outside validation to make sure this is the case.
You can't for now, there was an issue on github about that : https://github.com/w3c/html/issues/495
I am using CKEditor as a rich text WYSIWYG Javascript editor.
I would like to add an on-screen keyboard so that they can easily enter text from non-English alphabets.
I was planning on finding a JavaScript on-screen keyboard and adding a custom button with a CKEditor plug-in to trigger it.
I've found a couple of JavaScript on-screen keyboards. I like the one that Google provides best. The problem is that it needs to be bound to an HTML <textarea>. As far as I can tell CKEDitor uses an iFrame and has no <textarea>. Does anyone have any ideas for how to work around this problem? Is there a way I can bind the keyboard to the CKEditor "<textarea>"? Or is there an on-screen keyboard that doesn't need to be bound to anything?
Thanks!
You can try this one
http://debugger.ru/demo/projects/virtualkeyboard/richedit/ckeditor/plugins/Jsvk/examples/sample.html
There you'll see development release, but shortly it will be replaced with production one.
Project page: http://sf.net/prokects/jsvk/
I have a text input field in my web page that I am using to collect a date (via the jQuery Tools .dateinput). The user does not need to be able to type into the field. A dialog box appears when the field is clicked on. This is a problem on my Motorola Droid, because I don't want the soft-keyboard to appear when the field is clicked.
I have tried input.blur() on focus and also setting the field to disabled and readonly. Setting the field to disabled has undesired side effects. Setting the field to readonly works in everything but the Android browser. The browser seems to recognized the "readonly" attribute (or readOnly via javascript), BUT the field does not actually become readonly. When you click it, the soft keyboard still appears and allows you to change the field.
I suppose that this is a bug in the Android browser. Can anyone come up with a clever alternative?
I used a workaround - since I didn't need to actually edit in the input field (like you, I was popping a date picker), I changed to a span with similar styling. The code is kind of trivial once you have the trick, and it's really app specific so I don't have any really for you to see.