How to open iOS keyboard on page load - javascript

I have an html web app and I want the keyboard to open when I load my page,
I've tried:
<textarea class="form-control" autofocus="autofocus"></textarea>
but all that does is focus the textarea and makes it show up once I touch the page, rather then just automatically on page load.
I heard that it was impossible to do this without some type of user interaction in JavaScript alone.
If this is true, are there any plugins out there that might do this?
Hope this makes sense, thanks!

Unfortunately, autofocus isn't supported by mobile Safari due to usability reasons. I've seen people try different work arounds, including simulating a click/focus on the element in question. I've never been able to get it to work though, on mobile Safari at least.
$(function(){
$('#my-textarea').focus().click();
})

Related

Disable Chrome mobile's "tap to search" on a web app

I would like to be able to disable, through JavaScript or some sort of HTML meta-tag, the tap-to-search/touch-to-search feature found on mobile Chrome which shows a banner at the bottom of the browser every time the user long presses/taps on a word in any text paragraph.
This Chrome feature is a problem for me because this contextual banner completely covers the toolbar in the web app that I am developing, which is fixed at the bottom of the page.
I've only found this question from 2015 which references this Google Developers article (also from 2015), but the proposed solutions do not seem to work anymore except CSS "user-select: none"; unfortunately, disabling user selection is not a solution for me since user selection is required for my web app to work.
I have also tried setting event.preventDefault() when the "oncontextmenu" event fires, which does disable the search toolbar when the user taps on a word, but not when a user long presses on a word, as far as I have experienced.
So far the only partial "solution" that has worked for me has been to install the web app: as an installed PWA, tap-to-search does not somehow trigger. It still annoys me a lot that I would have to basically beg my potential users to install the web app on mobile.
I also know that the user can manually disable this feature globally in the Chrome Flags, but this is, I imagine, really annoying for a potential user as well.
Is there anything I am missing here? Do you know of any way to prevent tap-to-search from firing on a long press?
Adding the attribute tabindex="-1" to the <body> tag works for me.
As of 2021, it isn't possible to disable touch-to-search (when this is triggered by a long-press for text selection) in chrome mobile. The Google Developers article is apparently concerned only with touch-to-search triggered through a tap gesture.
Quoting donnd, from bugs.chromium.org:
Regarding #2 -- developer control: The 2015 article that you mentioned (https://developers.google.com/web/updates/2015/10/tap-to-search) focuses on triggering through the tap gesture. As you correctly point out, it does not address the long-press gesture triggering. Touch to Search responds to both tap and long-press but treats them differently. As I'm sure you know, the long-press gesture activates a whole set of features which can include copy, translation, smart text selection, and Web Search. A site developer can markup their page text as non-selectable in order to disable the long-press gesture entirely, but currently there's no way to disable only the Touch to Search response to long pressing. If you'd like to work with us to add such a feature, let us know and we'll file a separate feature request.

Fullscreen API without mouseclick or keydown event

For a friend I'm creating a narrowcasting (well, not really, just to one screen) page which reads content from his webshop and shows a slideshow with highlighted items, together with his logo and the time.
To run this I'm using an Android 4.1 device with a screen, I've installed Chrome onto the device which works properly. Everything is going pretty good so far, there's just one thing that annoys me. As we speak I'm using the Fullscreen API to go fullscreen as soon as the user presses the enter key. But due to changing content I want to do a refresh once in a while to fetch new content.
Here's where the problem lies: once the page refreshes it leaves fullscreen mode. I have been looking for settings in Chrome Android to allow fullscreen mode without a mouseclick or keydown event but haven't succeeded so far. Is there any way I can get the result I want (going fullscreen without a click of keydown)?
The reason I'm using Chrome Android is because this browser gave the best HTML5 support (for future use) and the best resolution (1280x720). But it's lacking a fullscreen mode I can use from within the browser. I tried Firefox for Android with a fullscreen plugin, that worked perfectly (not leaving fullscreen when refreshing), but Firefox only gave me a 960x520 viewport which is pretty small.
There's just one thing that comes up in my mind for now, which is doing an AJAX request to fetch the new content and replace the pages HTML with the fetched HTML (or perhaps just the 'slides' container).
Thanks for thinking along!
This code will do the same thing as refreshing the page automatically. I'm not sure if it'll prevent you from exiting fullscreen because I don't have a working copy to mess around with.
$.ajax() //Get the current page
.done(function(msg) {
document.documentElement.innerHTML = msg;
});
I don't recommend doing somthing like this, however. Your best bet is to abstract the part of the page that needs to be updated to it's own page, ie:
$.ajax("http://example.com/get_next_element")
.done(function(msg) {
$("selector_for_fullscreen_element").html(msg);
});

Programmatically open upload file dialog in Chrome

I have input[type=file] with log-in form on it. So after user logged in - file upload dialog instantly opened.
In all browsers I need (FF, IE10+) except Google Chrome, this call works perfect:
$('input[type=file]').click();
or
$('input[type=file]')[0].click();
or
$('input[type=file]').trigger('click');
Did anyone met this problem? If so, how to achieve this on Chrome?
Edit1:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.click here in support it's said that I can use it on input[type=file].
Also this click is working, but only if I'll actually click something, that than is clicking my input(so only after physical click).
Edit2:
And yes, I've already tried search function. But everything I've found was old, and pretty much anyone told, that even FF is not supporting this (which is not true now).
Edit3:
Example test page: http://jsfiddle.net/Ux3t4/
This is not allowed due to security reasons. By the way, even in Internet Explorer (the dialog will be shown but once you select a file, the file won't be submitted).

Focus on Textarea with Zend Form

I've build a form with Zend Form, and would like the focus to be on a text area inside the form on page load. I tried with JS, sometimes it shows the focus for half a second, but it removes the focus before one can actually type anything.
I thought Zend Form may prevents the focus, so i looked it up, and found the autofocus attrib-option, but that won't help either.
Any idea what the matter may be?
Thanks
autofocus seems to work fine, however it is not supported in IE. So you're likely stuck with javascript for now.
I tested autofocus in firefox and IE using:
$element->setAttrib('autofocus', 'autofucus');
it work well in firefox with 2 doctypes. HTML5 and XHTML1.0
I haven't tried it in this context but putting the HTML5 shim in your header seems to make IE behave much better.
<!--[if IE]><script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
If you have used dojo getFocusOnLoad() might help to set the focus when the a page loads..
Please follow these links:
http://framework.zend.com/manual/en/zend.dojo.form.html
http://framework.zend.com/manual/en/zend.view.helpers.html

Set keyboard to stay open even on "go" press with html5/javascript?

I'm building a small html5 web-app to hone my html5 skills. I've built the project and it works pretty good, but I want to enable some mobile functionality which should make it even cooler! One of the annoyances of using the site on mobile is that whenever you press the "go" button on the android keyboard after entering data into a textbox, it hides its self, despite the fact that in javascript I've specified that the textbox still has focus. Is there a way to explicitly tell the android browser to keep the keyboard open?
Thanks,
John
I think this is beyond the realms of JS - The keyboard is part of android, and thus (I assume) would be up to the browser to decide whether the keyboard stays or not - how would you cope for different browsers running across android?
Because I would assume they're not all running Webkit (Firefox mobile?).
So I think the answer is it can't be done :(

Categories