I am currently developing the login aspect inside a custom browser on ios. I want to open the keyboard when a user clicks on an input element. When an input element gets clicked, I set the 'autofocus' attribute for that element, followed by a focus on the element. However, these steps are not sufficient for opening the keyboard.
I have tried methods present in the link: IOS show keyboard on input focus, but nothing works.
The software version I'm working with is 14.4.2.
I am testing the app on an iPad.
var ev = new MouseEvent('click', {
'view': window,
'bubbles': true,
'cancelable': true,
'screenX': x,
'screenY': y
});
//x and y are the screen coordinates of the point where a user clicks.
var el = document.elementFromPoint(x, y);
console.log("Clicked element: "+el); //print element to console
el.addEventListener('click', function() {
el.setAttribute('autofocus', 'autofocus');
el.focus();
});
el.dispatchEvent(ev);
If you are testing your app in Simulator , make sure I/O -> Keyboard -> Connect Hardware Keyboard is unchecked. Otherwise, you won't see the keyboard appear.
Programmatic focus using element.focus() doesn't trigger the system-level keyboard to open because WKWebView only shows the keyboard if the focus is initiated by a user.
When the focus is triggered during user script evaluation, it is not considered as user interaction.
WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=243416
Changes done by Apple developers here: https://github.com/WebKit/WebKit/pull/2907
The changes are still in beta mode and have not yet been rolled out to the latest iPad OS version.
Related
I have the following basic setup
const St = imports.gi.St;
const Webkit = imports.gi.WebKit2;
const Gtk = imports.gi.Gtk;
let window, webView;
function _handleclick(){
window = new Gtk.Window({
type: Gtk.WindowType.TOPLEVEL
decorated: false,
skip_taskbar_hint: true,
skip_pager_hint: true,
resizable: false,
});
window.set_default_size(400, 600);
webView = new Webkit.WebView();
webView.load_uri(https://www.example.com);
window.add(webView);
window.set_position(Gtk.WindowPosition.MOUSE);
window.show_all();
}
The function is called when the user clicks a St.Bin object, defined like this
button = new St.Bin({
style_class: 'panel-button',
reactive: true,
can_focus: true,
x_expand: true,
y_expand: false,
track_hover: true
});
when this function is called, the Gtk.Window containing the WebView is drawn successfully, and the website displayed can be focused and interacted with using the keyboard (tab, enter, alt+tab, etc.) but it doesn't appear to pick up any mouse events. Even though clicking on the window will allow it to grab focus, the elements of the displayed website do not respond to any mouse interaction, be it clicking or scrolling.
I've been going over the documentation for both WebView and Window, according to the former, "WebKitWebView is scrollable by itself", which seems to imply that it should already be listening for mouse events, and from my spotty understanding of this article on Gtk event propagation, since the window has focus, it should be propagating the events to the GtkWidget; clearly there's something I'm failing to understand here or perhaps the mouse event is being picked up by something else? The website show in the webview seems to receive an event when the mouse pointer enters or exits the webview area, but no button presses or other movement.
I have tried fumbling around with a bunch of direrent attibutes and functions I've found in the documentation but every resource online would seem to indicate that the basic setup of a webview inside a gtk window should work without further tweaking.
I am having a Bitmovin player instance and I am trying to force fullscreen when device orientation changes to landscape. Code goes like this:
const portrait = window.matchMedia("(orientation: portrait)");
portrait.addEventListener("change", function (e) {
window.dispatchEvent(new Event('resize'));
if (!e.matches && player.isPlaying() && (player.getViewMode() == 'inline')) {
player.setViewMode('fullscreen');
}
if (e.matches && player.isPlaying() && (player.getViewMode() == 'fullscreen')) {
player.setViewMode('inline');
}
})
Event listener works correctly, but on Chrome in Android phones I get a TypeError: fullscreen error
If I force fullscreen via console in dev tools and restore to inline view, behaviour changes and video goes fullscreen on orientation change.
Researching I found that Chrome requires either user gestures for fullscreen events, or call them through an event (as is the case here) so I cannot figure out what is wrong.
Behaviour is the same using the native fullscreen api instead of bitmovin's setViewMode() functions
The problem is not specific to the Bitmovin Player but to the browser. I think you partly answered it yourself already:
Researching I found that Chrome requires either user gestures for fullscreen events, or call them through an event (as is the case here) so I cannot figure out what is wrong.
User activation is required, but it seems that the matchMedia's change is simply not considered such.
The HTML spec defines what should be considered an activation triggering input event as they call it:
An activation triggering input event is any event whose isTrusted attribute is true and whose type is one of:
keydown, provided the key is neither the Esc key nor a shortcut key reserved by the user agent.
mousedown.
pointerdown, provided the event's pointerType is "mouse".
pointerup, provided the event's pointerType is not "mouse".
touchend.
As you see, the event you try to use is not in this list.
If those are truly the only events considered by Chrome, then I don't think your desired behavior is feasible.
I am trying to create simple eased scrolling. But I have hit a hurdle on mobile browsers with the selectionchange event and touchmove. I am trying to scroll the page when a user selects text and the selection moves past the current viewing area. But on mobile the touchmove event is fired after the user is finished selecting the text and removes their finger from the screen then places their finger back to the screen. I have only tested in android on chrome and opera but the effect is the same.
Is there a way to scroll my page when the user is selecting text or is this an impossibility?
Here is a sandbox Codesandbox.
And here is simple code:
const handleSelectionTouchmove = (e) => {
const pageY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY;
console.log(pageY)
};
const handleSelectionTouchend = () => {
window.removeEventListener("touchmove", handleSelectionTouchmove);
window.removeEventListener("touchmove", handleSelectionTouchend);
};
const onSelectionChange = (e) => {
const selection = window.getSelection();
if (!selection.isCollapsed) {
window.addEventListener("touchmove", handleSelectionTouchmove);
window.addEventListener("touchend", handleSelectionTouchend);
}
};
Note:I have also tried using Pointer Events but the same thing happpens. I have also tried just setting a constant touchmove event and then setting a boolean isSelecting in the selectionchange event if the !selection.isCollapsed but the touch event is disabled when selecting. I have also tried just using the selectionchange event listener to just get the bounding client rect of the selection and go from there but then I run into isssues of selection direction and not accurately being able to find the selection point. In the codesandbox I have that code commented out if you wish to try it.
How I can prevent opening of tab bar every time user double clicks on my web page on new ios 15 safari in portrait mode.
One way to prevent the floating address bar from popping up on tap or swipe is to use preventDefault() on touch / mouse events. I have found this is working for me on iOS 15 Beta 4 when dealing with a canvas taking up the full screen:
const preventDefault = (evt) => {
evt.preventDefault()
}
// Make sure to remove these event listeners later.
canvas.addEventListener('touchmove', preventDefault)
canvas.addEventListener('touchend', preventDefault)
canvas.addEventListener('touchstart', preventDefault)
canvas.addEventListener('mousedown', preventDefault)
If you don't have a canvas you'll instead want to attach it to a different full screen DOM element. In my testing I found some issues with using document or body, so you may need to do some work & testing to determine what works and is safe to use (i.e. doesn't prevent button's from working).
On my webpage, I have a "register now" button in the header. On click this button will scroll the user to the bottom of the page and will, ideally, focus on a form field input and open the soft keyboard on mobile devices.
I am currently executing a .focus and .click state to the element after the smooth scroll function ends. While these two statuses are being applied, they are not opening the keyboard as desired.
componentDidMount = () => {
Events.scrollEvent.register('end', function(to, element) {
if(element.id === 'request-demo'){
var inputFocus = document.getElementById('name');
inputFocus.focus(console.log("focused"));
inputFocus.click(console.log("clicked"));
}
Events.scrollEvent.remove('end');
});
}
This function will open the keyboard on Android devices, but not IOS.
I am avoiding jQuery for this project, so vanilla solutions would be preferred
IOS will not allow developers to simulate user inputs within react-scroll's scrollEvent. By removing the focus and click states from within the end of scroll event, we were able to resolve this issue
Our current interpretation is that IOS blocks developers from simulating user inputs within on event functions, however any further insight would still be greatly appreciated