I have this Example here i have added a check box in popover. The added check box is not responding to any event neither model is set on checkbox selection.
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" name="isAnonymous" ng-change="setAnonymous(this)" ng-model="isAnonymous"/>
</label>Post as anonymous
</li>
A breaking change was introduced into UIWebView for iOS 9. Other platforms should work just fine.
iOS 9 Potential Breaking Change
Preparing for iOS 9
When scrolling a view with a textarea, the text area changes height while scrolling. After scrolling the original height is restored. This happens both in the Chrome device emulator and on iOS/Safari. See video for example:
https://www.youtube.com/watch?v=iMYaScyFL74
This example is based on the tabs example application
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<textarea rows="10" placeholder="Write something then scroll the view while the textarea is focued"></textarea>
</label>
</div>
</ion-content>
Note that you have to enable the device emulator in Chrome to reproduce the problem. You can find the full source here:
http://codepen.io/moberg/pen/myyYMJ
Anyone knows how to make the textarea preserve its size while scrolling?
This is a known issue: https://github.com/driftyco/ionic/issues/1934
A fix seems to be ready to be merged atm: https://github.com/driftyco/ionic/pull/3007
<div class="form-group">
<!-- Password-->
<label class="control-label" for="password">Password</label> <input type="password" id="password" name="password" class="form-control">
</div>
Consider following snippet. It complies with tb3. The problem is whenever I try to type anything into this field in safari - nothing gets written inside. Blinking cursor becomes active on field input during typing but no characters/black dots appear inside the field.
ff, chrome and even ie work ok. Basically on the picture I type but cursor stays at the same place no input at all.
I turned off all my scripts and problem still persists. If I change type to text it starts to work or if I remove form-control it works. But both are required...
Safari version 5.1.7 - version for windows
Thanks,
The solution that I implemented in my case is adding this line of CSS to element
.SafariFix{
-webkit-user-select:auto;
}
here is HTML of button
<input type="text" placeholder="Search by name" class="btn btn-default SafariFix" id="friendsearchinput">
note (this will work for safari 6 but I am not sure for previous version )
I had the problem that I used
padding: 20px 13px;
which caused issues on the input element. The input text and the placeholder weren't visible in Safari, but worked in any other browser.
I fixed it by using
padding: 0 13px;
height: 45px;
which looks the same but works in Safari.
I had the same problem: You could try to change the font-family of the password input field, for example:
style="font-family:Arial"
and then it should work as expected :-)
When focus is placed into an input of this form, iPhone shows input keyboard and Go button, which acts as submit. Is it possible to change the label to e.g. "Create"? I tried value, title or name but none of those work.
<form>
<input name="foo" type="text"/>
<input type="submit" name="Create" value="Create" title="Create"/>
</form>
No, something like this is not possible.
In a html page I am making, I tried to make div's clickable using html and css. This has worked perfectly in some major browsers I have tested it in (Chrome, Firefox, Opera, Safari), as well as an HTC phone, but when I tried to test it on Iphone I noticed it just didn't work. The checkboxes themselves weren't even selectable.
This is my (working apart from on Iphone) code:
HTML:
<div class="" style="height: 30px;">
<div style="display: table; width: 100%;">
<div style="display: table-row; width: 100%;">
<div style="display: table-cell;">
<label for="3171">Text....</label>
</div>
<div style="display: table-cell; text-align: right;">
<input type="checkbox" id="3171" name="3171">
</div>
</div>
</div>
<label for="3171">
<span class="blocklink">Invisible text</span>
</label>
</div>
CSS:
.blocklink {
display: block;
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
text-indent: -999em;
top: 0;
width: 100%;
}
So as you can see the technique I'm using is basicly just having a <label> spread all over the parent div so anywhere you click, it will tick/untick the linked checkbox.
Unfortunately, this doesn't work on IPhone. Would it be possible to somehow keep using this technique but also provide IPhone support? (Preferrably without javascript, because I'm really going out of my way to only use HTML & CSS)
Thanks in advance,
Arne
Adding an empty onclick="" to the label makes the element clickable again on IOS4. It seems that by default the action is blocked or overtaken by the press and hold copy and paste text mechanics.
<label for="elementid" onclick="">Label</label>
The problem seems to persists in iOS9 if any html elements are contained inside a label. At least happens with span elements inside it. 'pointer-events: none' fixes it.
<label for="target">
<span>Some text</span>
</label>
The code above would not be trigger a change of the target input, when the user taps 'Some Text', unless you add the following css:
label span {
pointer-events: none;
}
I solved it by placing an empty onclick="" on a parent element:
<form onclick="">
<input type="radio" name="option1" value="1">
<label for="option1">Option 1</label>
<input type="radio" name="option2" value="2">
<label for="option2">Option 2</label>
<input type="radio" name="option3" value="3" checked="checked">
<label for="option3">Option 3</label>
</form>
For some obscure reason, using CSS, if you apply:
label { cursor: pointer; }
Is going to work both on iPhone and iPad.
Another solution — albeit more hacky, but bulletproof — would be to absolutely position the checkbox over the label, z-index it, increase the width/height to encompass the underlying label and then 0 the opacity. This, of course would be tedious if there are multiple labels on the page... You naturally would also only implement the absolute positioning for that media size; no need to hack the whole app environment.
I ran into a somewhat unique situation. We were already using pointer-events: none on all spans in labels. However, we then needed to add in a <a> as clickable within one of those labels.
<label>
<span>Label text here. With a link text here.</span>
</label>
So, we explicitly set pointer-events: all on those <a>.
label > span { pointer-events: none; }
label > span > a { pointer-events: all; }
This is working in latest Chrome, Firefox, IE 11, and iOS 9 Safari.
If you change DOM on event handler (example in onMouseEnter) this cause skip all next handlers include onClick.
SetTimeout don't fix this.
Example:
1. in onMouseEnter use setTimeout with function injected new div in DOM
2. any onClick handler don't called.
Solution: avoid change DOM in events handler.
Remark: it problem found for label tag, but still persist for span inside label. May be this problem present on any type tags.
This behavuor found only for mobile iOS. In desktop Safari and in Mac OS Safari - all ok.
I narrowed down my problem to use of the Fastclick library; when I removed it from my codebase my issues went away, which indicates to me there isn't a native iOS/FF problem as suggested by other answers here.
Without knowing the libraries other folks are using, but knowing that Fastclick is exceptionally common, can I suggest that the root cause of this bug is in fact a library issue - not one which has managed to persist through years of Apple releases! It seems more likely. Maybe the others here can shed some light on whether they are using Fastclick?
More info
Some browsers prevent file inputs from being triggered by client code as a security measure. Try triggering a click event from the console with document.querySelector('input[type=file]').click() and it'll work, do the same from your code and it will mysteriously fail.
I imagine the reason this bug exists is because an ontouchstart handler is being applied to the <label /> by Fastclick. When it is triggered on a touch device, the library will proxy that event to the onclick handler, or in this case the native <label /> functionality. Unfortunately, this means that client code is triggering the file input opening, and it's being blocked by the browser.