This is not a "mobile" website. It is regular HTML/CSS. Is there a way I can force mobile devices to popup with the numeric keyboard when they focus on my textboxes?
We've had the best luck with using a combination of type="number" and pattern="\d*". We've seen success on iOS and Android devices, although I don't have a list of OS versions to share here.
<input type="number" pattern="\d*" name="year">
Just updating this post based on new tech..
<input type="number"/>
Works on most OS's aside from iOS.
So a newer version was introduced where you could simply use:
<input type="tel"/>
This forces a numbered keypad on any mobile device these days.
You can reference here for more info on this exact topic.
Its called "-wap-input-format".
You can use it in your css or in style element such as
<input type="text" style="-wap-input-format: 'N'"/>
See http://www.developershome.com/wap/wcss/wcss_tutorial.asp?page=inputExtension2
Edit: I didn't realize you wanted to pop-up numeric keyboard. I'm not sure if it is possible
HTML5 has a new input type "number" that tells mobile devices to bring up the numeric keypad:
<input type="number"/>
Read about it (and the other new input types) here: http://html5doctor.com/html5-forms-input-types/
Related
I have a very simple form in my react application to fetch the user credit card information as follows.
<form autocomplete="on">
<input class="control" id="card_number" type="tel" name="card_number" autocompletetype="cc-number"/>
<input name="cc-exp-month"/>
<input name="cc-exp-year"/>
<input name="cc-exp"/>
</form>
I also tested in a "react-way"
I want the browser (safari in this case) to show the credit card options like the image below.
Interesting fact:
I can reproduce the expected behavior (in both of the forms mentioned above) when I start my application with npm start (as per the image above).
However, if I run npm run build and serve the ./build folder the credit card options don't show up.
That's what I still don't understand, why the same code works in one way but it doesn't work in another way?
PS1: I'm testing in both cases with HTTPS.
PS2: I tested different input names, autocomplete="cc-number" etc. But none of them worked. As the code works with npm start, I don't think is a code issue.
your HTML needs to be very properly setup for browser to pickup the UI flow and trigger auto fill functionality. It also depends upon browser support as well for example Opera didn't trigger for me, while chrome is working. Could you try following below:
https://googlesamples.github.io/web-fundamentals/fundamentals/design-and-ux/input/forms/order.html
https://greenido.github.io/Product-Site-101/form-cc-example.html
I have added many working examples below and also please check link of the other answers. This answer contains content from the below mentioned resources and SO answers.
If both of them is working for you then you please compare them with your html.
As i can see above you're html is not formatted properly and doesn't contain even <label> tags along <input>
An example of proper payment form
<label for="frmNameCC">Name on card</label>
<input name="ccname" id="frmNameCC" required placeholder="Full Name" autocomplete="cc-name">
<label for="frmCCNum">Card Number</label>
<input name="cardnumber" id="frmCCNum" required autocomplete="cc-number">
<label for="frmCCCVC">CVC</label>
<input name="cvc" id="frmCCCVC" required autocomplete="cc-csc">
<label for="frmCCExp">Expiry</label>
<input name="cc-exp" id="frmCCExp" required placeholder="MM-YYYY" autocomplete="cc-exp">
just as a reminder i would like to add here
How to Enable AutoComplete on your HTML forms
Here are some key points on how to enable autocomplete:
Use a <label> for all your <input> fields
Add a autocomplete attribute to your <input> tags and fill it in using this guide.
Name your name and autocomplete attributes correctly for all <input> tags
Example:
<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="name#example.com" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name#example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">
How to name your tags
In order to trigger autocomplete, make sure you correctly name the name and autocomplete attributes in your <input> tags. This will automatically allow for autocomplete on forms. Make sure also to have a <label>! This information can also be found at https://developers.google.com/web/fundamentals/design-and-ux/input/forms#recommended_input_name_and_autocomplete_attribute_values
For example for CC
Credit Card
Use any of these for name: ccname cardnumber cvc ccmonth ccyear exp-date card-type
Use any of these for autocomplete:
cc-name
cc-number
cc-csc
cc-exp-month
cc-exp-year
cc-exp
cc-type
requestAutocomplete()
Read here:
https://developer.chrome.com/multidevice/requestautocomplete-faq
https://www.html5rocks.com/en/tutorials/forms/requestautocomplete/#toc-introduction
https://blog.alexmaccaw.com/requestautocomplete
Resources
Current WHATWG HTML Standard for autocomplete.
"Create Amazing Forms" from Google. Seems to be updated almost daily. Excellent read.
"Help Users Checkout Faster with Autofill" from Google in 2015.
For Autofill to work on iOS safari, the page has to be served over HTTPS and the certificate should not be a self-signed one. It has to be one given a valid CA.
Hope this helps
Faced the same issue, check safari preferences
Make sure you are not using private mode or any other visitor account!
I have a simple form in react, which lives in a modal. If a user was to use autofill for an email field for example, it would update other fields including fields that I've already filled in. This would lead users to submitting data, not knowing that fields out the view have been updated.
I've tested this in non-react forms and Google Autofill works fine, in that it would not overwrite existing values in fields. But in react lets say I inserted firstname = john, and then use autofill on the email...it would over 'John' and use whatever is saved in Autofill.
Is anyone aware of a way around this? I'm not going to turn autocomplete off as I still want users with the ability, anyway I've tried variations of autocomplete=off as suggested else where but still no result
You can use autocomplete="off" in your input that you do not wish to autofill.
Please also make sure your input types are correct.
example: <input type="text" name="foo" placeholder="foo" autocomplete="off">
You can even do this using JS:
inputElm.setAttribute( "autocomplete", "off" );
as an example.
regards
Aaron
Try to create hidden input right before your input and add random number for your original input name where you don't want Chrome to autofill values:
<input type="text" name="" value="" readOnly={true} style={{display: "none"}}/>
<input
type="text"
name={"address " + Math.random()}
/>
I am playing around with angular and material for a while now (coming from jquery, it was a little bit an effort). I do understand that it is a pure client based thing, but what is the client without server... in my case I have a datepicker which I want to post back to the server and have no idea how to.
So this is my datepicker:
<md-datepicker ng-model="user.birthdate" md-placeholder="Birthdate" ng-required="true">
</md-datepicker>
It's quite obvious that there is no "name" attribute which would be required to post it.
What I also tried is adding a hidden input field with the same model, but it's also empty on the server:
<input type="hidden" name="birthdate" ng-model="user.birthdate" />
So my ideas to solve it would be either to write a directive for adding the name to the actual input behind the datepicker (which will cause some issues with the date format) or read the data when submitting it to the server and somehow transfer it with the form (e.g. with the hidden field). But I cannot believe that it is so complicated because I assume that I am not the only one with this requirement - and whenever I search I only find stuff like date format issues...
Thanks in advance,
Philipp
I'm developing an application with Cordova 3 tools for VS2013(Cordova Version 3.6.4). When I deploy to local machine in Windows I get the following behaviors for <input type="text>:
I am unable to type in any <input type="text>.
When i give focus to the <input type="text> the cursor randomly blinks in other places.
Even with the following markup, <input type="text" name="name" value=" " />, as the first node in the <body> I get this behavior.
Debugging I have done:
Used ng-focus to see what element has the focus and it is the correct element.
Used ng-keypress and it also references the correct element.
Checked on Chrome and does not have this problem.
My current solution
I changed the <input type="text> to a <textarea style="height:34px;">. I would rather it worked as it should but this should suffice for now.
The issue would appear to be related to CSP (Content Security Policy) rules of Universal Windows Apps (IE) (and interestingly also Chrome Extensions.
The fix is simple and involves putting the ng-csp in the html element on your page. This will allow you to regain edit control of your input elements (text boxes). Your code should look like
<html ng-csp>
More reading here: AngularJS Documentation ng-csp
I have a form that POST all data that is entered, when saving. But when I refresh the page, not all entries are bound to their respective input fields.
It is a bit strange because I am using ng-model on all the fields.
Here is an example of what doesn't bind:
<input name="full_name" ng-model="user.full_name" type="text" required></input>
and here is one that does bind:
<input name="address" ng-model="user.address" type="text" required></input>
Has anyone run into this issue, or notice something I may be missing?
It could be the browser remembering your last input in the forms. So after refreshing, the browser pre-populates the form and angular doesn't update the scope. There is a Google Groups thread about that. The best solution I found is to add autocomplete="off" in the inputs of the forms. Because after refreshing, there is no way angular could be remembering your last input in the form, unless you are using cookies for that wich you are obviously not.