Trigger iOS keyboard in web application on non-text element
The question has already been posted here: Manually triggering the iPhone/iPad/iPod keyboard from JavaScript
It looks like it is not possible I'm afraid!
IOS show keyboard on input focus
I found a solution, click()
didn't work, but i figured it out.
searchMobileToggle.addEventListener('click', function() {
if(mobileSearchblock.classList.contains('active')) {
searchField.setAttribute('autofocus', 'autofocus');
searchField.focus();
}
else {
searchField.removeAttribute('autofocus');
}
});
I was working with vue.js that was removing input autofocus
attribute, when the component was loaded.
So i had it on click, but there was another problem, the autofocus only worked once, but combined with focus(), it now work all the time :)
Thanks for your help !
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?
I found a solution which works, although it is a bit ugly. It also won't work in every situation, but it works for me. Since I'm adapting the size of the user interface to the iPad's window size, the user is normally unable to scroll. In other words, if I set the window's scrollTop, it will remain at 0.
If, on the other hand, the keyboard is shown, scrolling suddenly works. So I can set scrollTop, immediately test its value, and then reset it. Here's how that might look in code, using jQuery:
$(document).ready(function(){
$('input').bind('focus',function() {
$(window).scrollTop(10);
var keyboard_shown = $(window).scrollTop() > 0;
$(window).scrollTop(0);
$('#test').append(keyboard_shown?'keyboard ':'nokeyboard ');
});
});
Normally, you would expect this to not be visible to the user. Unfortunately, at least when running in the Simulator, the iPad visibly (though quickly) scrolls up and down again. Still, it works, at least in some specific situations.
I've tested this on an iPad, and it seems to work fine.
Related Topics
Disable Spaces in Input, and Allow Back Arrow
Storing Arbitrary Info in HTML Tags for JavaScript
Can JavaScript Change the Value of @Page CSS
Hiding Div If Using Mobile Browser
Animate Length of Border-Bottom
How to Collapse a Table Row in Bootstrap
Bootstrap 3 > Trying to Create Columns with Equal Heights
How to Pass Styles to Child Component and Use It as Scoped Style in Vue
CSS Style to Inline Style via JavaScript
How to Get CSS Class by Name from Stylesheet
Can Multiple HTML Elements Receive Focus at the Same Time
CSS Position Absolute Making the Textbox Go Down
Cross Browser Rgba Transparent Background While Keeping Content (Text & Images) Non-Transparent
How to Change the Style of Elements with Same Class Name
Invert Filter Not Working on Ie and Safari
How to Position a React Component Relative to Its Parent
How to Add a Classname to a CSS Variable
Get Computed Value of CSS Variable That Uses an Expression Like Calc