I am accessing an html webapp within a WebView in an Xbox XAML app. For context, it was previously a hosted webapp, but leaks while playing video content were causing crashes, which prompted me to use a XAML app with a WebView and a MediaElement.
Initially, my <input/> fields were not showing the keyboard (InputPane) when focused and pressing the 'A/ok' button on the controller/remote. Using the following
window.Windows.UI.ViewManagement.InputPane
.getForCurrentView()
.tryShow();
helped show the keyboard on first key press. With my app hosted in the WebView, I had the same problem, but window.Windows was not available. The solution seems to be the use the ScriptNotify event on the WebView, that itselfs calls the (very similar) following code in the C# portion of the code:
Windows.UI.ViewManagement.InputPane.GetForCurrentView().TryShow();
So far so good. Now the problem: when hitting the "B/return" button on the controller/remote, the InputPane leaves, and the <input/> element is obviously focused since it still shows a blinking text cursor, but the app does not respond to keypresses. I have to press the "B/return" button a second time to regain control on the webapp.
I looked into the InputPane api, and in hacks like focusing the WebView but without success so far.
Any help is greatly appreciated!
Related
My iOS app uses a WKWebView with contenteditable = true on a specific div. I'd like to have code to make the keyboard show up for the web view, so the user can just start typing. Things I've tried that have had no effect:
Telling the web view to becomeFirstResponder (a long shot, because the web view wouldn't know what div to use).
Injecting JS to tell the div to focus(). (This works in other browsers, but sadly not in WKWebView)
Simulating touch events in JS via TouchEvent and dispatchEvent() in the hope of making it seem that the user had tapped on the div.
In the third case I also used addEventListener() to observe the simulated touches and compare them to real touch events from tapping the screen. It looks like the key difference is that the event's isTrusted value is false for the simulated touches.
I get that it's a potential security issue to let apps simulate touch events, but I didn't have any other ideas. I'm trying to get the keyboard to appear, what the user types is up to them and not something I want to mess with. Basically I want the same thing as calling becomeFirstResponder() on a UITextView.
This is very similar to a WebKit issue 142757 but I haven't figured out how to use the suggested workaround linked from there.
Clarification: I can set up and use an editable web view, but the keyboard doesn't appear until I tap on the web view. I'm trying to make the keyboard appear automatically, without requiring a tap to initiate editing.
I tried this in an iPad playground, and it works without any action on my part. It’s possible there is another view that is capturing touches, or “contenteditable” is misspelled, or something else?
I have been working on this specific requirement for more than 2 months now. But I haven't found a solution yet to disable the native keyboard when an input field is focused in a webview. I am building an app which has a built in keypad(essentially a view) and I want this to be displayed instead of the native keyboard.
What I've tried so far:
Add javascript eventListener for click events to display my keypad
using JavscriptInterface.(Works)
Set the webview focusable:false and
its parent's descendantFocusability to blocksDescendants (This works
but doesn't display the cursor on the input field)
Hiding the native
keyboard on resize event of javascript using loadUrl method.(Works
but the native keyboard is displayed momentarily before hiding the
keyboard)
Listening to the OnGlobalLayoutChange event to check if
the keyboard has been added. (Works but the result is same as
in the case above with a little improve in performance)
Force stop the IME service. (Works but the app has to be a system
app to force stop packages and the keyboard service has to be started
whenever the app goes to background.
Is there a way in which I can make this work?
You should set the windowSoftInputMode to stateAlwaysHidden for the Activity containing the web view. This should keep the onscreen keyboard hidden for the entirety of that Activity.
I am trying to create an android application with phonegap and Cordova. I have got a Honeywell device 75e on which the app will be running. I have got to the point where by which if I press the scan button on the device, the bar code gets printed into the textbox which is in focus. However what I want to do is that when the scanner button is pressed and the bar code has been read using the internal scanner on the device, the application should go to the next page. I was thinking of adding a on key event on the input box itself but I cannt really do that as the user of the application can type the text in the textbox and then press the go button.
Is there a way to find out the keycode for the scanner button on the device and if there is then I could modify the application to look for the key code and fire the fake button click event.
Any help here would be much appreciated.
I think I have figured it out how to get around this but posting it here for anyone who is stuck as well. If you log into the honeywell technical support portal, (login is free) you can get the web API SDK which allows you to communicate with the hardware. It adds listeners to the bar code and also has additional functions.
I am making a hybrid app. I am using xamarin for android, pretty much the same as android. I have already figured out how to hook the phone's back button press. When pressed I want my app code to either mimic or call a javascript function that is part of the webpage that the webview is displaying. It is my web page, so I know the code that the webview is rendering. To be specific, I want to call a jquery slideToggle function on a page element when the phone's back button is pressed. Can that be done, and if so what would be the best approach? I'm hoping that someone here has had to do something just like this in the past. Thanks.
I don't think webview supports JQuery, unless maybe you reference it.
The Xamarin android way of doing it is:
webView.addJavascriptInterface(new JsObject(), "injectedObject");
webView.loadData("", "text/html", null);
webView.loadUrl("javascript:alert(injectedObject.toString())");
Source : Android.Webkit.WebView.AddJavascriptInterface Method
Also make sure you have enabled Javascript,
web_view.Settings.JavaScriptEnabled = true;
You can show or hide the element by finiding it by id (document.FindElementById). Then you can set its display to block or none. Thus you can do it purely in Javascript.
Add on :
There are couple of problems with your method. To name a few -
on pressing of back button user expects a particular behavior and it should not be altered. This would not give a rich user experience.
if you are override ing the back button press then what about the navigation bar menu click.
JavaScript way of doing can cause security issues.
I want to be able to show keyboard on mobile browser (e.g. Android) after navigating to the page.
I have already seen some workarounds:
Show virtual keyboard on mobile phones in javascript
Can I trigger Android soft keyboard to open via javascript ( without phonegap )?
Showing Android's soft keyboard when a field is .focus()'d using javascript
But all of these examples work only if user tap somewhere. It allows to trigger focus() from within the click(). Does someone know if there any way to do the same thing but without user clicking?
I've tried to trigger click programmatically but it also not working. http://jsfiddle.net/alex_myronov/e5JcP/10/
My current answer to this is no, can't be done. The script that calls focus() click() on an input needs to be running with user context, ie. triggered by a user interaction. After fairly dedicated fiddling, I've found no way round this.
I managed to successfully open the virtual keyboard by just calling focus() method of the input.
It works in my app both on android 2.3 and 4.1.
I think the trick is that you have to wait untill the page is completly rendered before you call focus().
My app is using jquery mobile and I call focus() when the pageshow event is triggered:
$("#myPage").on("pageshow", function( event ) {
$("#myPage").find('input:first').focus();
} );
Or maybe it's working because I'm in a phonegap app?