Android 4.0.4 Soft Keyboard on WebView Results in White Page - android

If I load a large html file in a webview running Android 4.0.4 and then press on an input in that webview it works normally. However, when I click a button on the keyboard ("a" or even using voice input) the whole screen goes white and only the input that was initially selected can be seen by the user.
This works perfectly fine in 4.0.3 and 4.1. It only happens in webviews that are longer than the screen (i.e. scrolling required).

I came up with this, after variable trying.
The reason is you do your stuff before input.onblur finishes its work.
So one of the solution is just wrapper your stuff with setTimeout()
here is an example
var ipt = document.createElement('input');
ipt.type = "text";
document.body.appendChild(ipt);
ipt.onkeyup = function(e){
e=e||window.event;
var key = e.keyCode || e.which,
ipt = e.target || e.srcElement;
if(key==13){
ipt.blur();
setTimeout(function(){
//DO YOUR STUFF HERE !!!
}, 100);
}
}

Related

Unity3d, when I touch an InputField, the keyboard doesn't show

When I tap on an inputfield on android device, i get a little text area and an ok button. But I have to touch the input field to get the keyboard to pop up.
Any ideas?
All I'm doing code wise is:
if (!wasFocused && TouchScreenKeyboard.visible && createAccountPanel.activeSelf)
{
wasFocused = true;
btnMat.color = validC;
}else if (wasFocused && !TouchScreenKeyboard.visible && createAccountPanel.activeSelf) {
wasFocused = false;
btnMat.color = invalidC;
//messageMNG.CreateMessage("Checking name: " + usernameChangeInput.text, true);
dbMNG.CheckName(usernamePreview.text);
}
When I do a check, it says that touchscreenkeyboard is visible.
**EDIT
I just created a new scene and added an input field and a text mesh pro input field and I get the exact same thing.
The keyboard does not pop up if you are running the app on Unity Remote app. Keyboard will automatically show up once you build and run your unity app on device.
I was having a similar problem today, but found the reason no keyboard was showing was due to building and launching onto a locked phone. When I made sure the phone was unlocked when I clicked the input, the keyboard showed up below that box/ok portion.

Focus html page or element from a webview with talckback

I have an hybrid app developed with ionic 1.x. When the app loads I am forcing the webview to take the focus from native side with the hope that after some initialization request a survey dialog appear and take the focus it self(When dialog appear I am forcing it to take focus). I am trying to make it work with talkback
The problem is that when you load the app from scratch the dialog is not focused so it is not read, after navigate through the app and come back to the original page then in works as expected, looks like as the user is in fact inside the page things works ok.
Is there any workaround or strategy to solve this particular situation?
Thanks in advance
I don't know if it helps you,
but we use it to focus on specific elements in the web view.
it works in android and ios,
but in android, before every element it read webview.
(if you found a solution for it please let me know)
function putFocus(elementForFocus) {
var $element = $(elementForFocus);
var focusInterval = 10; // ms, time between function calls
var focusTotalRepetitions = 10; // number of repetitions
$element.attr('tabindex', '0');
$element.blur();
var focusRepetitions = 0;
var interval = window.setTimeout(function () {
$element.focus();
}, focusInterval);
};

WebView gets stuck on Read-only Empty TEXTAREA on Samsung Galaxy S3 (Android 4.1.1)

I observed that the Android Webview gets stuck when I try to tap into and focus on a TEXTAREA that is read-only and empty. The keyboard comes up and of course doesn't input anything into the TEXTAREA, but after that the WebView is stuck.
I can only force dismiss the keyboard using the "BACK" key but no other actions are performed. Can't do anything except restart the whole application.
<textarea rows="3" id="abcd" readonly="readonly" name="abcd"></textarea>
I keep getting this Verbose Message in the LOGCAT console against webview.
singleCursorHandlerTouchEVent ~getEditableSupport FASLE
This happens only on the Samsung S3 device running Android 4.1.1 and works perfectly on Samsung Nexus S (Android 4.1.2) and 4.1.2 Android emulator.
Other solutions proposed in these links did not work
Phonegap TouchEvent
Phonegap button does not fire due to "singleCursorHandlerTouchEvent -getEditableSupport FASLE"
This issue can be reproduced easily with this Standalone Webview example
public class TestWebViewTextStylesActivity extends Activity {
WebView mWebView = null;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
String data = "<html><body>" +
"<textarea rows='3' id='abcd' readonly='readonly' name='abcd'></textarea>" +
"</body></html>";
mWebView = new WebView(this);
setContentView(mWebView);
// Set some HTML
mWebView.loadDataWithBaseURL("file:///android_asset/", data, "text/html", "UTF-8", null);
}
}
I found the solution after spending half a day looking at various alternatives.
The solution was very simple which was to introduce a space between the TEXTAREA html tags.
<textarea rows="3" id="abcd" readonly="readonly" name="abcd"> </textarea>
_____________________________________________________________||___________
________________________________________________INSERTED___SPACE ___HERE__
And I've also observed that setting the .innerText attribute to BLANK string via JS also causes the TEXTAREA to cause Webview Freeze.
That space is also required without which the browser assumes all the HTML followed by the TEXTAREA also belongs inside the TEXTAREA. So correct way is to give a single space and then complete the TEXTAREA (</TEXTAREA>)
For Writable TEXTAREA HTML elements you can't have this empty space or this gets prefixed with the value that's inputted by the user. So I had to write a JS method that will empty out the value that I had to inject before setting it to the WebView.
function clearOffTextArea(textAreaId) {
var x = document.getElementById(textAreaId);
var isReadOnly = false;
if (x.hasAttribute('readOnly')) {
isReadOnly = x.readOnly;
}
if (isReadOnly == false) {
if (customMethodToTrimString(x.innerText) == '') {
x.innerText = '';
}
}
}

html5 video tag to play full screen with Android

I'm creating a mobile site where I have a video I'd like to play when someone clicks on a link:
<div id="player"></div>
<?php echo $result_videos[$i]["camera_name"]; ?>
<script type="text/javascript">
function DoNav(theUrl)
{
// only add the player if it doesn't yet exist
if($('#myfileplayer').length == 0) {
var mydiv = $("#player");
var myvideo = $("<video id='myfileplayer' src='"+ theUrl + "' width='320' height='240' controls></video>");
mydiv.append(myvideo);
} else {
$('#myfileplayer').attr("src",theUrl);
}
}
</script>
With the iPhone, this works great, I click on video and it goes full screen. Android works as well but it requires you to click the video to play then click on the full screen. Is it possible to get to the full screen like iPhone just when you hit play?
This should work, with plain Javascript:
var myVideo = document.getElementById('myVideoTag');
myVideo.play();
if (typeof(myVideo.webkitEnterFullscreen) != "undefined") {
// This is for Android Stock.
myVideo.webkitEnterFullscreen();
} else if (typeof(myVideo.webkitRequestFullscreen) != "undefined") {
// This is for Chrome.
myVideo.webkitRequestFullscreen();
} else if (typeof(myVideo.mozRequestFullScreen) != "undefined") {
myVideo.mozRequestFullScreen();
}
You have to trigger play() before the fullscreen instruction, otherwise in Android Browser it will just go fullscreen but it will not start playing.
Tested with the latest version of Android Browser, Chrome, Safari.
I've given up on this. My conclusion is that the html5 video tag on Android devices blows chunks. It works in some devices but not on others. And there is no common criteria like 3.x or 4.x, it just seems to be random. I hope this gets better sometime soon especially since flash support is not longer existent.
Oddly sticking with a simple href seems to be the most consistent. You lose some controls but way better than the video tag...at least so far.
Have you checked out mediaelement.js?
Try something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.mozRequestFullScreen ? this.mozRequestFullScreen() : this.webkitRequestFullScreen ? this.webkitRequestFullScreen() : null; }, false);
Either that or maybe something along the lines of:
document.getElementById('myfileplayer').addEventListener('play', function (e) { this.webkitEnterFullscreen(); }, false);
webkitEnterFullscreen is the fullscreen method of a VIDEO element that is currently working on iOS. I'm not sure about support on Android devices.
mozRequestFullScreen and webkitRequestFullScreen are implementations of Mozilla and Google's FullScreen API which is used to activate full screen mode on practically any DOM element.
Hopefully that gives you at least a starting point to work from...
Most vendors require user interaction to go full screen, which is why natalee's answer doesn't work. For Andriod, you can call webkitEnterFullScreen() inside your anchor's click handler since it's a valid user interaction:
myvideo[0].webkitEnterFullScreen();
myvideo[0].play();
or
$('#myfileplayer')[0].webkitEnterFullScreen();
$('#myfileplayer')[0].play();
Note how I'm stripping jQuery's wrapper with [0]. It doesn't work otherwise.

Is it possible to handle jQuery input events in Firefox mobile while the keyboard is shown?

I am trying to capture input events on a text input. Using jQuery I am handling the keyup event to populate a list of matches (an auto-complete list). This works fine on the stock browsers and others such as Maxthon, but in Firefox mobile nothing happens while the keyboard is shown--I have to either press enter or hide the keyboard for it work work.
I am using jQuery 1.7.2, Android 2.3 and the latest version of Firefox (10 I believe). I have also tried other events such as input and keydown without any luck.
Is it possible to handle key/input events in Firefox mobile while the keyboard is shown?
The problem is that when word suggestions are turned on in the Android keyboard, Firefox is not triggering the key events during the time the keyboard is "guessing" words, although the values are sent to the text field. I would say this is a bug in Firefox, but I guess they have chosen to do it this way because the result of the key pressed is not consistent with the value the field gets if the keyboard suggests something different than the exact thing you write.
I solved this by using a sniffer that checks on the value if it has changed or not.
var $searchField;
var _keypressWatchingTimer = 0;
var _previousTerm = '';
function keypressStartWatching() {
keypressStopWatching();
_keypressWatchingTimer = setInterval(executeAutocomplete, 100);
}
function keypressStopWatching() {
if (_keypressWatchingTimer != 0) {
clearInterval(_keypressWatchingTimer);
_keypressWatchingTimer = 0;
}
}
function executeAutocomplete() {
var searchTerm = $searchField.val() || '';
if (_previousTerm == searchTerm)
return false;
searchApi.autocomplete(searchTerm);
_previousTerm = searchTerm;
}
function init() {
$searchField = $('#searchField')
.focus(keypressStartWatching)
.blur(keypressStopWatching)
.keyup(executeAutocomplete);
}
init();

Categories

Resources