Handling text elements of web pages using qml keyboard - javascript

I am using the Qt Web Kit 1.0 to open web pages. I have a keyboard available with me, written in qml. I want to use this keyboard to fill in the text into text boxes of the HTML pages.
Say, I opened gmail.com. Now, I want to fill in the user name and password. But when I will click on this text element of the webpage, what event should I handle to bring out my keyboard for user to use it ? And where exactly will I send this text generated from the keyboard, for it to be set into the username field of that page ?

You can change the text field value by evaluating some custom javascript code in the WebView:
webViewId.evaluateJavaScript("document.getElementById('textInputId').value = '" + yourValueString + "'")
Documentation here.
Edit:
For the keyboard activation you can refer to the javaScriptWindowObjects property: you can activate it, for example, in the body onload event, or in the text field onfocus event.
Edit2:
I add a simple example to explain what I'm trying to say:
I assume you have a QML custom Item called Keyboard, and that this Item has a signal onKeyPress called whenever a key is pressed.
Your code should be something like this:
WebView {
id: webViewId
javaScriptWindowObjects: QtObject {
WebView.windowObjectName: "qml"
function showKeyboard {
keyboardId.opacity = 1;
}
}
onLoadFinished: {
evaluateJavaScript("document.getElementById('textInputId').onfocus = window.qml.showKeyboard;")
}
}
Keyboard {
id: keyboardId
opacity: 0
onKeyPress: {
webViewId.evaluateJavaScript("document.getElementById('textInputId').value += '" + keyValue + "'")
}
}

Related

Setting document.activeElement.value shows value on screen but fails to accept

There is this web page: https://www.comed.com/Pages/default.aspx
with a "Sign In" button in the top right corner. I am displaying this page from a UWP app (this is actually a JavaScript question) in a WebView control, and run a dynamic JavaScript script on this page (via a call to InvokeScriptAsync()) to automatically insert the login or password in the currently selected field. The script that runs is simply this:
document.activeElement.value='" + value + #"';
This works in the sense that the login or password shows correctly on the screen BUT when I click on the "Sign In" button the page is telling me "Username (Email Address) is required." and "Password is required.".
If instead I manually type in the SAME value (or use copy/paste) then I get no errors!
I get the same type of error on the MS Channel 9 login page, but most other login web pages do NOT have that issue.
Use this code $(document.activeElement).trigger('change') after setting the value.
In addition to the above answer, and to support different web pages, I ended up using some Javascript from Correct Way to Programatically Trigger Change Event of ASP.net CascadingDropDown using JavaScript:
if ("createEvent" in document)
{
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
document.activeElement.dispatchEvent(evt);
}
else
{
document.activeElement.fireEvent("onchange");
}

Getting the element touched by user from webview

Hey guys I'm trying to get the html element that was touched by user in the webview. The scenario is for instance user touches some kind of button in the webview and the application displays the html code for the button like:
I'm already able to get the html code that the user is browsing but problem is with getting the specific html elements.
The websites the user will be browsing through will be a random sites on the internet so I can't simply put an onclick function on the button and notify the android about the click.
Any idea how would I be able to implement that?
try this:
webview.setOnTouchListener(new View.OnTouchListener() {
public boolean onTouch(View view, MotionEvent event) {
WebView.HitTestResult hr = ((WebView)view).getHitTestResult();
Log.i("TAG", "getExtra = "+ hr.getExtra() + "Type= " + hr.getType());
//return true;
return false;
}
});
getExtra() returns the element which is clicked by user and getType() is used to identify which HTML element is clicked by user.

integrating input fields using IME with "Scene" in samsung smart tv?

Below mentioned code is able to show me keypad but the problem is after pressing any key it gives me "body is not activated....." because of
document.getElementById("userid").focus();
But If I remove document.getElementById("userid").focus(); Keypad will not generate and Keys are started working
Sample Code for IME
SceneSignIn.prototype.handleShow = function (options) {
alert("SceneSignIn.handleShow()");
// this function will be called when the scene manager shows this scene
this.ime_plainText = new IMEShell("userid");
this.ime_passwordText = new IMEShell("password");
document.getElementById("userid").focus();
}
Check if:
You have the default on new javascript application anchor element in index body. This:
Your focus management in the application is not being interfered when you give the input element focus.

How to set a "First Word Hotkey" to button in Javascript?

Situation: I have a HTML Form, inside it, i have some <input>'s with some info, and a <input type=submit> that is the Send button, who sends the form content to the url set on action parameter.
Problem: Missing knowledge(i don't know how to do).
Explanation of what i want: I want a hotkey like, for example, hit now on your browser or another common software like Notepad the Alt key of your keyboard. You will see a menu coming down on the top of screen, and some Word that are underlined like this one:
Well, you see the F with a underline, and you know that if you hit the key F the File menu will be opened.
Details: The hotkey that i want, is a little different from the example above, but have the same concept. Because i want to allow the user to Press: Alt + F instead of only F to automatically click on the Button that have F set as hotkey to itself.
This way, i can place one <input id=F type=button> i used attribute ID, for example, and if i press Alt + F the button is automatically clicked.
In theory, maybe its easy, but i really do not know how to do this on Javascript.
Does someone know how to do it?
What you want is something like
<input type="submit" accesskey="F"/>
Now, when the users hits Alt + F (or Alt + Shift + F on Firefox) it will be as though he had clicked on the submit button.
EDIT: to use Alt + F on firefox too see this topic: http://forums.mozillazine.org/viewtopic.php?t=446830
You can change it back to how it was using about:config, change:
ui.key.chromeAccess to 5
ui.key.contentAccess to 4
In Opera, press Shift + Esc. That brings up the access key list for the current page. Then you can press any number from the access key list to follow the respective link. Users can change this keyboard shortcut under Tools > Preferences > Mouse and keyboard.
If you were to use jQuery.hotkeys then you would bind each key or keystroke to a function and deal with it that way.
If you gave your buttons an ID of the key you want them to respond to, you could do something like this:
$(document).ready(function () {
var $doc, altKeys, modified;
$doc = $(document);
modified = function (ev) {
var selector;
selector = '#' + ev.data.replace(/^alt\+/, '');
$('button').css({background: 'transparent'});
$(selector).css({background: 'red'});
};
$('button').each(function () {
var key;
k = $(this).attr('id');
$doc.bind('keydown', 'alt+' + k, modified);
});
});
See this fiddle for a working example

Why doesn't this code work the whole time?

I have this javascript code:
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0)
{
$(window).load(function()
{
$('input:-webkit-autofill').each(function()
{
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}
It is designed to remove the background color of the webkit autofill background color in inputs.
However, it only works sometimes and doesn't work when I click on an input, or a button that executes jQuery async functions at around the same time that the page loads.
What is wrong with this code that makes it not work sometimes, but work other times? What must I adapt?
This is what I am doing: How do you disable browser Autocomplete on web form field / input tag?
But I want to keep autocomplete on, while removing the background. I need this, as the background goes over a background image in my text input, so you can't see it.
Is this what you're attempting? How do you disable browser Autocomplete on web form field / input tag?
if not--
Can you confirm that all the elements are being selected, and that the problem lies in the timing of the browser's autofill? What happens if you use the more common $.ready instead?

Categories