I'm using a commonly used ionic directive to set focus to a textarea on page load which shows the ionic keyboard, and it works fine on every device I've tested with except on an iPhone 4s.
HTML
<textarea focus-me></textarea>
JS
.directive('focusMe', function($timeout) {
return {
link: function(scope, element, attrs) {
$timeout(function() {
element[0].focus();
}),350;
}
};
});
On an iPhone 4s, when the textarea loses focus the keyboard disappears and then pops right back up. This doesn't happen on any other device.
How can I set focus to the textarea on page load (and subsequent page loads) and prevent the ionic keyboard from popping back up when the textarea loses focus?
There is an error in your code calling the $timeout directive. It should be:
.directive('focusMe', function($timeout) {
return {
link: function(scope, element, attrs) {
$timeout(function() {
element[0].focus();
}, 350); // correct this
}
};
});
Related
I'm using a hidden
<input id="mfile" type="file" accept="image/*">
and triggering it with a paper-fab from google's element catalog. It works everywhere except for safari on iOS, the click fires but it doesn't get redirected to the input.
By redirect i mean a on-tap listener on the fab that triggers this.$.mfile.click();
Any suggestion or workaround?
Thanks to #marx_tseng from polymer slack, here is the solution:
https://polymer.slack.com/archives/general/p1478229319019481
<paper-fab id="fileFab" label="File" on-tap="_pickFile"></paper-fab>
<input type="file" id="filePicker" hidden />
...
_pickFile: function(e) {
e.preventDefault();
this.$.fileFab.blur();
// cancelable is true, not work on ios simulator
// this.$.filePicker.click();
// default cancelable is false, work on ios simulator
try {
// fixes mobile safari
var evt = new MouseEvent("click");
this.$.filePicker.dispatchEvent(evt);
} catch (e) {
// fallback for IE11
this.$.filePicker.click();
}
}
My datepicker can disappear on blur of trigger event in the windows Chrome, windows Safari, mac Safari, android Chrome except IOS Safari browser.
My code:
<input class="title-menu-left-input form-control"
name="birthday" data-date-format="yyyy-MM-dd"
data-date-type="string" data-autoclose="1"
ng-model="dateFrom" placeholder="date" data-trigger="focus"
bs-datepicker>
Anyone can help me to find why it doesn't disappear on blur of trigger event in IOS safari browser? Thanks in advance!
There are some background which maybe help you to know more about my question. you can visit this page http://mgcrea.github.io/angular-strap/#/datepickers or plunker: http://plnkr.co/edit/lUtYyIqD4ETCG5zbKrNC?p=preview. my code is the same as it. I don't know why it can disappear on blur of trigger event in the windows Chrome, windows Safari, mac Safari, android Chrome except IOS Safari browser. I wonder whether i do special process in IOS Safari. Anyone has come with this quesiton?
What about the another source code ?, it should have a button to open date picker popup, and some from controller
The problem is that 'blur' event is not fired on iPad. So when user touches screen outside of calendar input and dropdown I fire that event by this manually.
controller: ['$scope', function ($scope) {
function isiPadiPhone () {
return ((navigator.userAgent.match(/iPad/i) != null) ||
(navigator.platform.indexOf("iPhone") != -1) ||
(navigator.platform.indexOf("iPod") != -1));
}
if (isiPadiPhone()) {
document.body.addEventListener("touchend", handleTouchEnd, false);
$scope.$on('$destroy', function () {
document.body.removeEventListener("touchend", handleTouchEnd, false);
});
}
function handleTouchEnd(event) {
var dateInput = document.getElementById('your_input_id');
var nextSibling = dateInput.nextSibling;
if (!nextSibling || !nextSibling.classList || !nextSibling.classList.contains('dropdown-menu')) {
//no calendar dropdown is shown now
return;
}
if (isParent(event.target, nextSibling)) {
return;
}
if (isParent(event.target, dateInput)) {
return;
}
//we have to fire 'blur' event manually on iPad
dateInput.blur();
}
function isParent(element, parent) {
while (element != null) {
if (element === parent) {
return true;
}
element = element.parentNode;
}
return false;
}
}
I made a simple page with some divs being sortable by the jQuery UI Sortable, with a little help from Touch Punch to get it working on an iPad running iOS 7.1.2.
Inside each of these divs, I included a text input tag. On desktop browsers the inputs work fine, but the iPad doesn't recognize the click on the input component. The keyboard isn't launched and I can't type into it. Any lights?
My page is here: https://www.dropbox.com/s/5crp55r9jw98var/sortableTest.zip?dl=0
Well, here's what worked for me.
I edited the jquery.js. On jQuery.Event.prototype, inside the preventDefault function, there is:
if ( e.preventDefault ) {
e.preventDefault();
} else {
e.returnValue = false;
}
Basically, I changed the if condition to e.preventDefault && e.target.tagName != "INPUT". It solved the example, but in the real life I needed to add some more conditions to ensure that other input fields won't get caught by this.
Change in jquery.ui.touch-punch.js worked for me.
JS: jquery.ui.touch-punch.js
Method to modify:
//line: 31
function simulateMouseEvent(event, simulatedType) {
//...
}
//changes to add ++
if ($(event.target).is("input") || $(event.target).is("textarea")) {
return;
} else {
event.preventDefault();
}
I know this is an old question but got the following to work for me without modifying the JS files:
let detectTap = false;
$('body').on('touchstart', '#sortableMenu input', () => {
detectTap = true;
});
$('body').on('touchmove', '#sortableMenu input', () => {
detectTap = false;
});
$('body').on('touchend', '#sortableMenu input', (e) => {
if (detectTap) $(e.target).focus();
});
Basically just adding a tap listener on the inputs, and when it gets the tap, focus on that input.
I'm facing a problem using this 2 PhoneGap plugins: "BarcodeScanner" & "ChildBrowser" (inside an iOS app, with XCode 4 & PhoneGap 2.0).
I've a button "Scan" on my app UI. When the user clic on this button, the barcode scanner is launched.
So, in the Success function of the barcode scanner callback, I need to open the recovered URL from the scan in a new Childbrowser window (inner the app).
But the new Childbrowser window is never been opened, while the console displays "Opening Url : http://fr.wikipedia.org/" (for example).
Here is my JS part of code:
$("#btnStartScan").click(function() {
var scanBarcode = window.plugins.barcodeScanner.scan(
function(result) {
if (!result.cancelled){
openUrl(result.text);
}
},
function(error) {
navigator.notification.alert("scanning failed: " + error);
});
});
function openUrl(url)
{
try {
var root = this;
var cb = window.plugins.childBrowser;
if(cb != null) {
cb.showWebPage(url);
}
else{
alert("childbrowser is null");
}
}
catch (err) {
alert(err);
}
}
And all works fine if I call my openURL() function inside a Confirm alert callback for example, like this:
if (!result.cancelled){
navigator.notification.confirm("Confirm?",
function (b) {
if (b === 1) {
openUrl(result.text);
}
},
'Test',
'Yes, No');
}
But I need to launch the ChildBrowser window directly after a scan, without any confirm alert etc.
Does anybody know how to solve this please?
I also have this same problem.
Solve it by set timeout.
var scanBarcode = window.plugins.barcodeScanner.scan(
function(result) {
if (!result.cancelled){
setTimeout(function(){ openUrl(result.text); },500);
}
},
function(error) {
navigator.notification.alert("scanning failed: " + error);
});
I'm running into the exact same problem.
My application also has another mechanism to show a webpage besides the barcode reader and when I do that action I can see that the barcode-related page HAD loaded, but it never was shown.
In ChildBrowserViewController.m, I'm looking at the last line of loadURL() which is webView.hidden = NO; and I'm thinking that the child browser is set visible after we barcode but something about the barcode reader window caused the child browser to get set to the wrong z-order, but I'm not familiar enough with the sdk to know how to test that or try to bring it to the front.
Hope this helps target a potential area.
I have an application that requires a page refresh whenever the orientation changes (ipad/iphone). Within this application, HTML5 videos also gets presented at certain times in UX. Whenever a user is viewing a video in full screen mode, their first inclination is to rotate the device to landscape orientation if it was not already in that mode. When they do this, however, it triggers the nasty page reload, effectively ending their viewing session. By tapping into webkit full screen API I was able to write logic to control this behavior, which works perfectly on Safari desktop as well as with the iPad/iPhone user agent selected in developer tools, but it DOES NOT work on the native iphone/ipad.
document.webkitIsFullScreen returns false/true correctly in console in Safari, but comes up as undefined on iphone/ipad. Can anyone tell me how to accomplish this on ipad/iphone, since these are the only devices that require this functionality anyway? Or is there a much simpler solution that I am overlooking? Any help is greatly appreciated!
$(document).ready( function () {
var video = document.getElementById('video');
var canrefresh = true;
video.addEventListener("webkitfullscreenchange",function(){
// Detects if video is in full screen mode and toggles canrefresh variable
// canrefresh = false when webkitfullscreenchange event is heard
// canrefresh = true after exiting full screen
if (canrefresh == true) {
canrefresh = false;
} else {
canrefresh = true;
}
console.log(document.webkitIsFullScreen+' | '+canrefresh);
}, false);
$(window).resize(function() {
// Look to make sure not in full screen, and canrefresh variable is true before refreshing page
if((document.webkitIsFullScreen == false) && (canrefresh == true)){
window.location = window.location.href+'?v='+Math.floor(Math.random()*1000);
}
});
console.log(document.webkitIsFullScreen+' | '+canrefresh);
$('body .test').text(document.webkitIsFullScreen+' | '+canrefresh); // document.webkitIsFullScreen is returning 'false' in Safari (correct), but 'undefined' on native iphone/ipad device
});
The equivalent property which is compatible with Mobile Safari is the webkitDisplayingFullscreen property on the HTMLVideoElement DOM object.