I have a data entry form in a HTML5 application that users will be filling in on an iPad 2.
Is there any way to make the iPad keyboard default to the "Symbols" view (i.e. the keyboard with the numbers 1,2,3,4,5,6,7,8,9,0)?
They will only be entering numbers in these fields, and it's quite frustrating every time you hit "next" it reverts back to the QWERTY view.
You could do this on the iPhone by using some -wap CSS, but it doesn't work on the iPads unfortunately.
Wossname's solution above works well, but if you are also using this method to hide the spin buttons that Webkit add to <input type="number" /> in desktop Safari, it will also disable the placeholder attribute in desktop Safari.
Using type="text" pattern="[0-9]*" instead of type="number" seems to fix both of these issues.
I haven't tested this myself, but according to Apple's docs this should work:
<input type="number">
Related
I want to control the keyboard displayed when using WKWebView.
I have the following swift code starting the webview:
let webView = WKWebView(frame: self.view.bounds, configuration: configuration)
webView.navigationDelegate = self
It will load html that looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="inputElement textFieldInput">
<input type="text" id="textField" value="" data-clear-btn="true"/>
</div>
</body>
</html>
Normally the keyboard is controlled by the type option on the input field. "num" for a numeric keyboard and "text" for a alphanumeric keyboard. But I want to have more control.
I have done enough research to know that this can not be accomplished by using the option on the text box. I am fully expecting to write modify the code that opens the webview.
How can I modify the swift code to allow me to do this?
Ideally, I could define multiple keyboards and allow the html code to control them something like this: <input type='customkb1'> and <input type='customkb2'>
My immediate need is to disable the emojis button on the keyboard but I would like a generic solution as I will be able to really improve the usability of my application if I can define a keyboard specific to what the user is inputting.
Here is what we have found so far:
That is trick I know and use for native part of the application:
https://stackoverflow.com/a/25861718/1885345
But it doesn't work for webViews
That is the way to specify keyboard from WKWebView:
https://stackoverflow.com/a/28533488/1885345
But it doesn't have the option to set keyboard without emojis
That is what I use to disable third-party keyboards:
https://stackoverflow.com/a/34863426/1885345
Nice challenge! So far I have tested it on an iPad and got it half-working (with a caveat) by declaring the input field's pattern as such:
<input type="text" pattern="[0-9]*" value="" data-clear-btn="true"/>
The thing is that the keyboard actually pops up first with the numeric view but it allows to toggle the alphanumeric (without emojis) view via the lower ABC side-buttons.
With Javascript I copied the entered value to another field and the Regex does not actually filter out the entered alphanumeric characters. So far so good.
As soon as you put A-Za-z (as prefix or postfix) into the pattern, the emoji button comes back though.
I have tried catching the UIResponder.keyboardWillShowNotification but does not return the keyboard object, as I wanted to set its UIKeyboardType programmatically then, but this attribute only reflects UITextViews apparently.
Alternatively you could declare the input field of password type, clearing the dots with Javascript and displaying the actual value to another non-editable field...
If I find a more elegant way, I will update my answer as it is getting quite late. Cheers.
EDIT: Apparently only using a TextInput element with ReactNative you can directly prop the keyboardType to the ascii-capable iOS keyboard which shall set us free from Emojis.
If you’re looking for a way to only allow certain characters to be entered in an input field, disabling keyboard modes (the emoji keyboard, for example) isn’t the best option. There are many ways to type in unwanted characters: they can be pasted from the clipboard, or even entered in the result of text replacement (for example, you can make :) turn into 😁).
Input validation should be done on the webpage side, not with WKWebView.
i'm building an ios app that is made with AppFramework Intel and Xcode.
The files (html, js, css, img) are inside the app and are loaded by UiWebView.
I have some forms that require the user include some values.
When the input fields are pressed for some reason the keyboard is bigger than the conventional:
Here is how the keyboard looks like and should be.
http://backstagedigital.com.br/stackoverflow/keyboard-issue.png
Any help is welcome.
Thanks!
According to apple documentation:
Configuring the Keyboard for Web Views
Although the UIWebView class does not support the UITextInputTraits protocol directly, you can configure some keyboard attributes for text input elements. For example, you can include autocorrect and autocapitalize attributes in the definition of an input element to specify the keyboard’s behaviors, as shown in the following example.
<input type="text" size="30" autocorrect="off" autocapitalize="on">
You can also 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 iOS. The following list shows how to display each type of keyboard, including the standard keyboard.
Text: <input type="text"></input>
Telephone: <input type="tel"></input>
URL: <input type="url"></input>
Email: <input type="email"></input>
Zip code: <input type="text" pattern="[0-9]*"></input>
You can find the complete article here https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
.0I have a problem aligning the labels to the input fields with a mobile device (normal browser does not have any problem with that).
What I have:
<div data-role="fieldcontain">
<label for="name">Label:</label>
<input data-mini="true" type="text" name="name" id="name" value="" />
</div>
In my head I have a media query like
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0">
Example, what I have:
Label
What I want to have under a 450px i.e.:
Label ________
The label (according to the media queries in the css) moves to the left side of the input field if the width is over 450px. This works like a charm in my local browser. But if I access this with any mobile device regardless of the resolution(tries s3, iphone and other devices) the label gets always displayed on top of the textfield(in non landscape mode).
I would like to understand why this behavior occurs on a mobile device. Does this have sth. to do with the viewport? Im not familiar developing on mobile devices and their specific media queries.
I fully aware that there are workarounds like grids and tables. But I would like to have this behavior for my web app. It makes sense on smaller devices that its getting displayed in 2 lines. I would like to do it without overriding jquery mobile classes and writing my own solution if there is a way.
Thanks in advance!
css file:
jquery.mobile-1.2.0.min.css
edit:
3227.line: #media all and (min-width:300px) {
I'm using contenteditable in several sections of our time keeping app. Since we're logging time, naturally, I want the keyboard to automatically switch to the number keyboard for ipad users. I've tried adding all the attributes to the elements that I can think of such as:
Type=number
Type=tel
pattern=[0-9]*
but ipad still loads the default keyboard.
Here's an example:
<div class="editable validate numbers-only" contenteditable="true" type="number" pattern="[0-9]*">3</div>
Are there any tricks that I can use to display the number keyboard for my ipad users?
you can set the inputmode attribute on a contenteditable element to control which keyboard is displayed, at least in chrome and mobile safari. for example:
<div contenteditable=true inputmode=decimal><div>
i tested out a few more examples here: https://notatoad.github.io/inputmodes.com/
I read in this post that you can use the \d* pattern to make the number keyboard appear on iOS, so a basic form with a number keyboard would look like:
<form>
<input type="text" pattern="\d*">
<button type="submit">Submit</button>
</form>
which should cause a number keyboard to automatically appear on iOS when entering form information.
Now, I'm pretty sure we could extrapolate this and say that we could use \d* on the contenteditable div to answer the question:
<div class="editable validate numbers-only" contenteditable="true" type="text" pattern="\d*">3</div>
I hope this works out for you?
I am not sure how you are using the keyboard here? Means, Is the user adding / Updating time or something? If they do, make the input type to number. This is will tell the browser (safari) that this is input for only numbers and it will tell the iOS to show number pad automatically.
<input type="number">
Checkout my fun project called weight calculator. Check how it will prevent any other keys inside input as well as it will show Number pad in mobile device.
Weight Calculator
<form>
<input type="text" pattern="\d*">
<button type="submit">Submit</button>
</form>
then
<div class="editable validate numbers-only" contenteditable="true" type="text" pattern="\d*">3</div>
<input type="tel" pattern="[0-9]*" novalidate>
This should give you the nice numeric keyboard on Android/iOS phone browsers, disable browser form validation on desktop browsers, not show any arrow spinners, allows leading zeros, and allows commas and letters on desktop browsers, as well as on iPad.
In iPad Safari browser, when I change focus from a textbox to a dropdown, the keyboard still remains... Is there some way (maybe with Javascript) I can hide the keyboard when user blurs from the textbox?
Indirectly speaking, I am looking for a equivalent of (but in Mobile Safari)
[tempTextField resignFirstResponder];
I found the solution for this at http://uihacker.blogspot.com/2011/10/javascript-hide-ios-soft-keyboard.html. Essentially, just do this (it worked for me):
var hideKeyboard = function() {
document.activeElement.blur();
$("input").blur();
};
I had iPad with iOS 5.0.1 not hiding the keyboard after successful login on my site. I solved by simply executing the javascript command
document.activeElement.blur();
after successful login and now the keyboard is correctly hidden :-)
I know this is a slightly older question, but I discovered the answer today for this, and the answer is embarrassingly simple... I spent way more time than I would like to admit figuring this out ;)
To prevent showing the keyboard on:
<input type="text" name="someInput" />
for when you want to do something like use a jQuery UI datepicker...
add a readonly attribute like so:
<input type="text" name="someInput" readonly="readonly" />
If you are trying to be mindful of people with JS turned off, you could always leave off the attribute and add it in your code:
$('[name=someInput]').attr('readonly','readonly');
Hope this helps.
Here is a jsFiddle demonstrating the concept: http://jsfiddle.net/3QLBz/5/
$("#txt").on("focus", function(){
$(this).blur();
});
works with jquery UI datepicker on IPad
Natively, iPad, iPhone keyboard should disappear when the input looses focus.
I figured out on mobile/tablet devices that
Safari only handles click event for elements having cursor:pointer
property.
I've finally added cursor:pointer on the body tag for mobile/tablet devices and it works like a charm.
Little sample
body {
#media (max-width: 1024px) { /* IPad breakpoint */
cursor: pointer; /* Fix iPhone/iPad click issue */
}
}
Version without jQuery:
function hideKeyboard () {
document.activeElement.blur();
Array.prototype.forEach.call(document.querySelectorAll('input, textarea'), function(it) {
it.blur();
});
}
I call .focus() on another textfield and the keyboard disappears. I'm using the Sencha touch framework, the textfield im referring to is an Ext.Text object.
I know this is counter-intuitive, but it seems to work for me
Sample.views.MessageBar.getComponent(0).blur();
document.activeElement.blur();
window.focus();
Sample.views.sendMessageBar.getComponent(0).setDisabled(true);
You can use codes above. First and Forth lines are for that textfield. It works on iphone but it doesnt work on Android. I tried Iphone 3gs and samsung galaxy s2.
According to Apple Safari documentation, when you select a dropdown (select list) the iOS dismisses the keyboard and displays native iOS select control. Make sure you use SELECT element for your dropdown list
and also try adding this to your meta tags for the page
<meta name="apple-mobile-web-app-capable" content="yes" />