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
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'm having severe issues with inputs using ng-model in IE (11 and all previous versions,) but everything is working correctly in all other browsers. This issue was first observed last week. We have made no updates to this section of our application and heard no reports of users having this issue prior to last week.
We are running Angular 1.4.3.
Basically, inputs like this one:
<input data-ng-model="answer.value"></input>
Are not correctly updating the model. It looks like an issue with onChange or onFocus events - the inputs never lose their ng-pristine and ng-untouched classes. They are properly displaying the initial value from the model but any updates made by the user simply fail to save. We've experimented with adding a <meta http-equiv="X-UA-Compatible" content="IE=11" /> tag to our head to no avail. Removing all validations from the inputs makes no difference. There are no console errors or alerts.
In my case, I had a parent component, and a child input.
The parent component had a poor choice of Angular binding attribute; I called the attribute "disabled". disabled was a bad choice of custom attribute name because that is a standard attribute for many HTML elements.
When I changed the custom attribute name to "custom-disabled", the child inputs started responding.
Internet Explorer interpreted some ancestor disabled attribute to mean all descendants should be disabled; therefore my angular input ng-model, ng-change, ng-blur, ng-focus were not working.
I should've known: when I asked $('input').is(':disabled'), the result was true. I ignored this because the input element itself didn't have the disabled attribute; only an ancestor element did!
I had simillar problem and solution seems to be easy. If you have code similar like this:
<form name="myForm">
<table ng-disabled="formToggle">
...
<input ng-model="form.name" />
...
</table>
</form>
IE10, IE11 won't check fields and won't set their pristine dirty values on form (other browsers works ok). Just remove ng-disabled (from table in this case and in other case from parent element) and it will work.
Please suggest me the locator to identify the text area in a web application.
<div contenteditable="true" id="taTextElement9662867992554610" ta-bind="ta-bind" ng-model="html" placeholder="Enter Role Requirements" class="ng-isolate-scope ng-pristine ng-valid ta-bind placeholder-text"><p><br></p></div>
I tried with //div[#ng-isolate-scope ng-pristine ng-valid ta-bind'].
I'd rely on the id attribute (assuming the 9662867992554610 part is dynamic):
//div[starts-with(#id, "taTextElement")]
Or, in case you are using protractor, you can choose to use by.model() locator:
element(by.model('html'))
The ID looks randomly generated, if thats the case - you can't rely on it.
Event if it's unique - it's "engeneering sense", is not unique enough. I would not rely on it in any case.
As suggested above, you can use:
//div[starts-with(#id, "taTextElement")]
But i don't think it's a good solution either. The best solution IMO is ask the web-developers to create special attribute for those kind of elements, for example:
<div data-hook="my-special-text"</div>
This data-hook attribute will serve as a contract between you and the developer, he will know that once he change it - automation tests can be affected. Moreover, he can (should) use this attribute in his client tests too (Protractor).
We have a regular expression that we use for e-mail. Our application is inheriting the regular expression, so it may not be an option to switch it... Anyway, the same set of steps seem to crash the javascript in the browser. I've been able to reproduce in IE and Chrome, but not Firefox. Here is the code:
var mod = angular.module("myApp", []);
mod.controller("MainCtrl", function ($scope) {
//Pattern that blows up the browser during ng-pattern
$scope.emailPattern = /^(?!.*\.{2})([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+([\.][a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+)*)#((([\-]?[a-zA-Z0-9]){2,}[\.])*(([a-zA-Z0-9][\-]?){1,})+).(([\.]([a-zA-Z0-9][\-]?){2,}([a-zA-Z0-9])*)+)$/;
});
HTML:
<div ng-app="myApp" ng-controller="MainCtrl">
<form name="emailForm" novalidate>
<input type="text" ng-model="user.email" name="email" maxlength="80" required ng-pattern="emailPattern">
</form>
<br>
{{user.email}}
</div>
Fiddle here. Here are the basic steps that will cause the browser to crash:
Type a bunch of alpha characters into the text box until it is full (other inputs may work, but this is what I've used).
Backspace 2 characters.
Hit the Home key to return to the front of the input.
Type the characters: a#
This will crash IE and Chrome consistently. Has anybody encountered this bug before? Any known workarounds?
I think the issue is with the regex expression itself.
If you went to any regex validator site (like http://regexpal.com/), using the original expression, the same problem would occur there (with the browser freezing).
Change:
$scope.emailPattern = /^(?!.*\.{2})([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+([\.][a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+)*)#((([\-]?[a-zA-Z0-9]){2,}[\.])*(([a-zA-Z0-9][\-]?){1,})+).(([\.]([a-zA-Z0-9][\-]?){2,}([a-zA-Z0-9])*)+)$/;
To:
$scope.emailPattern = /^(?!.*\.{2})([a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+([\.][a-zA-Z0-9!#$%&'*+\/=?^_`{|}~-]+)*)#((([\-]?[a-zA-Z0-9]){2,}[\.])*(([a-zA-Z0-9][\-]?))+).(([\.]([a-zA-Z0-9][\-]?){2,}([a-zA-Z0-9])*)+)$/;
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/