Is it possible to show and customize the native keyboard with Ionic framework?
Lets say for example that I want to show the native keyboard when you come to a state
and I want the keyboard to only contain specific characters (only letter for example).
You can do this with the keyboard plugin. Checkout this plugin
http://ngcordova.com/docs/plugins/keyboard/
Input Type Method
Although you cannot change the makeup of the keyboard, you can use different type parameters on your input elements to control which type of keyboard mobile devices will show.
For an overview of the different types of inputs, check out this site.
Return False Method
In addition to changing the type of keyboard that displays, you can also specifically allow or disable certain characters. Accomplish this by checking each keycode as it is typed. For a reference of keycodes, see here.
<input type="text" onkeypress="if(event.keyCode == 101){ return false; }">
Related
In my app I want the user to type names into a UITextField (or equivalent) and then when they press return, it will put that word(s) in a blue bubble that's usually associated with tags. The cursor then moves to the end where they can add more "tags".
This can be seen when adding contacts in the To, CC & BCC fields in the Mail app, and also when selecting contacts in the Messages app.
How is this done? Is it something that's provided in the UIKit or available somewhere else?
Many thanks,
Michael
Venmo just open sourced their token field.
https://github.com/venmo/VENTokenField.git
edited:
The equivalent control in desktop Cocoa is an NSTokenField, but there doesn't seem to be an equivalent for Cocoa Touch.
Since iOS 13 there exists UISearchTextField.
https://developer.apple.com/documentation/uikit/uisearchtextfield
You can see that component in action in the Photos App.
That should fit for many use cases. By removing the leftView you can also get rid of the search icon.
But be aware: You can‘t mix text and tokens at various positions.
From the docs:
Tokens always occur contiguously before any text in the search field.
Adding this here for reference:
Feel free to check out TaggerKit (a library I made), it's more or less what OP was talking about. You can basically add tags functionality to your app by just adding a view and a couple of properties.
I dont think you can do it with any built in functionality in the SDK, never seen such a feature. What you could do however is implement it yourself, have some custom blue button with some text over it, and when the user hits return you can have some code that takes the text and returns you the button that you need, shouldnt be too bad to implement
I'm trying to implement a kind of "guided typing" widget for data entry, in which the user's text entry is highly controlled and filtered. When the user types a particular character I need to intercept and filter it before displaying it in the widget. Imagine if
you will, a Unix shell embedded as a webapp; that's the kind of thing I'm trying to implement. I've tried two approaches.
In the first, I extend a TextArea, and add a KeyPressHandler to filter the characters. This works, but the browser-provided spelling correction is totally inappropriate, and I don't see how to turn it off. I've tried:
DOM.setElementProperty(textArea.getElement(),
"spellcheck", "false");
But that seems to have no effect- I still get the red underlines over
"typos".
In the second approach I use a FocusWidget to get KeyPress events, and a separate Label or HTML widget to present the filtered characters back to the user. This avoids the spelling correction issue, but since the FocusWidget is not a TextArea, the browser tends to intercept certain typed characters for internal use; e.g. FireFox will use the "/" character to begin a "Quick Find" on the page, and hitting Backspace will load the previous web page.
Is there a better way to accomplish what I'm trying to do?
You might just be able to use event.preventDefault() on your keypress events to avoid these browser behaviors. Otherwise, maybe a hybrid of the two approaches? Have a hidden TextArea with focus, accepting key events, and then post the typed characters to a separate Label.
There is no specific GWT method on TextBox for this, but this simple line of
GWT code fixes the problem for Chrome (for other browsers, YMMV - it may depend upon how completely they implement HTML5) by setting an attribute on the underlying input element:
myTextBox.getElement().setAttribute("spellCheck", "false");
Perhaps this attribute is a relatively new feature.
I'm making a webapp, and I'd like an input field to show the Iphone's number keypad.
I understand that type=number will make the keypad show the way I'd like.
The trouble is that type=number does not support placeholder text. So if I would like this:
Expiration Date:
[eg: 2010]
I can not get it to work, and also show the right keyboard.
Is there a way to force the iPhone keyboard into number mode without using the number input type?
Placeholder seems to work (in both Safari on my Mac as Mobile Safari on my iPhone; compatibility list).
<input type="number" placeholder="2010">
http://jsfiddle.net/XPL48/
Otherwise, use JavaScript to create a placeholder, e.g. this jQuery plugin: http://plugins.jquery.com/project/placeholder.
I am designing a small webpage targeted for the iPhone/iPod touch. I have a form that requires the user to enter a code. When you tap on the corresponding field, the iphone will automatically set the first letter to caps. Is there any way to avoid this? I want the whole field to be entered in small caps.
Thanks
Edit: use "none" instead of "off". On your webpage, all you need to do is set the autocapitalize property to off for your input field. So:
<input autocapitalize="none">
See the Safari Web Content Guide: Designing Forms and Safari HTML Reference
Below is the answer I had before, which relates to native apps. Keeping around for anyone who's looking for that answer.
From the UITextField Documentation
The appearance of the keyboard itself can be customized using the properties provided by the UITextInputTraits protocol. Text field objects implement this protocol and support the properties it defines. You can use these properties to specify the type of keyboard (ASCII, Numbers, URL, Email, and others) to display. You can also configure the basic text entry behavior of the keyboard, such as whether it supports automatic capitalization and correction of the text.
So basically, the UITextField supports this protocol. The property needed is the autocapitalizationType. An example in code is:
myUITextField.autocapitalizationType = UITextAutocapitalizationTypeNone;
or if you dislike the dot notation:
[myUITextField setAutocapitilizationType:UITextAutocapitalizationTypeNone];
For other input types, there are attributes available that do what they say:
<input type="text" autocorrect="off" autocapitalize="off">
I would like to be able to control the initial shift state of the iPhone keyboard from a Javascript prompt (updates added for web forms). It seems to mostly default to an initial capital but I feel sure I've typed into/seen prompts that are initially lower-case. I also feel sure that I've seen custom layouts used from the web.
Googling around initially (see updates) didn't reveal any obvious documentation or previous answers besides saying that having "phone" or "zip" in the class of the input would bring up the numeric keyboard (although this may have stopped working). Apparently "url" or "email" could select the appropriate layouts also. This obviously doesn't apply to javascript prompts, and may not work in some versions.
Is there any official source for all this stuff? Does it work across all firmware versions? Has anyone got a general solution for changing keyboard layout or for doing this in Javascript prompts?
UPDATE
For web forms: found this from Apple straight after posting the question, along with this. The question still stands for Javascript prompts.
UPDATE 2
Doh! This is also useful; placeholder text and search button not mentioned in the Apple links. Some more relevant info here.
How do I control which keyboard is displayed when a user touches a text field?
You can control which type of keyboard is displayed when a user touches a text field in a web page. To display a telephone keypad, an email keyboard, or a URL keyboard, use the tel, email, or url keywords for the type attribute on an input element, respectively. To display a numeric keyboard, set the value of the pattern attribute to "[0-9]" or "\d".
These keywords and the pattern attribute are part of HTML 5, and are available in iPhone OS 3.1 and later. See Listing 15 to see how to display each type of keyboard, including the standard keyboard.
Listing 15: Controlling keyboard display
Text:
Telephone:
URL:
Email:
Zip Code:
See http://developer.apple.com/library/safari/#codinghowtos/Mobile/UserExperience/index.html