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.
Related
I am using Bootstrap 3 on my current project and on my login page, I used the input-group-addon for the first time. My code currently looks like this:
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
<input class="form-control" type="email" name="email" required placeholder="E-Mail">
</div>
When I open the page on my iPhone with Safari and click the input field, it zooms in to the input field (centering it), as it always does. However, in this case it looks very odd due to the addon being left to it. Is it possible to center the entire "input-group", instead of just the input field, while still enabling the user to enter the input?
Thanks in advance! If any code is missing or you are looking for more information, I would be happy to provide it.
I found out now, that the zoom-effect occurs in Safari mobile, when the font-size of the text field is < 16px. Setting the font-size to 16px resolved the issue for me, as my input field with the addon was centered before and is no longer additionally zoomed in.
Additionally, the select element needs to have the focus pseudo-class attached.
.form-control:focus{
font-size: 16px;
text-align:center;
}
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
I'm pretty new to JQuery Mobile (using v1.3.1) and I'm not sure what I'm doing wrong here. I have a field-contain div with a label and a text/search input in it. When I resize the window the following happens:
First the searchbox jumps onto a new line (I could live with that), but then when I resize it further, it eventually gets taller and covers the label (I obviously cannot live with that :P ).
Here's the code:
<div data-role="fieldcontain">
<label for="city-location">Location:</label>
<input type="search" name="location" id="CheckCityNameInput" value="" data-mini="true" data-inline="true" />
</div>
<input type="button" data-inline="true" data-icon="search" data-iconpos="left" value="Locate city" data-mini="true"/>
This happens with Chrome and Firefox (I didn't test other browsers). Any idea what I'm doing wrong here?
Also when I resize it to the max, a "line" appears between the text input and the button... any idea why?
Damn, it was a conflicting CSS rules on the labels. Good to know that a float:left rule on a label would have this effect though.
Thanks for your help Gajotres.
.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 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">