QML + WebView + VirtualKeyboard

[WeX.tmpvar]

Hello! Can I replace the standard input fields on the page is loaded in the WebView, on my QML items?
Or how I can call my virtual keyboard when I click on a text box on the page, and then transfer entered text to the field which I pressed? Thank.

[hungnd]

Hi, it seems english is not ur native language. I don't understand what u mean in the first question. U wanna replace html input fields by QML items?
For the second question, u can do that by using a QObject (will be used as a javascript object) as a bridge between Qt application and the web page, handle event onclick of the textbox then call ur desired function (which shows up ur virtual keyboard) of the added QObject. Refer to "addToJavaScriptWindowObject":http://doc.qt.nokia.com/latest/qwebframe.html#addToJavaScriptWindowObject and "evaluateJavaScript":http://doc.qt.nokia.com/latest/qwebframe.html#evaluateJavaScript for more information

Regards :)

[WeX.tmpvar]

For the first question, yeah, I want to replace html input fields by QML items =)

Thanks for the answer on the second question =)

[fxonair]

Hello,
Could you make it work? If so, can you please share it?
I'm trying to do same thing: using a virtual keyboard for html inputs on WebView.
I've been trying for a few days, but i couldn't do it. Also I couldn't implement what hungnd suggests.
I'm new to Qt. Any help would be appreciated.
Thanks.

[hungnd]

I did do it and I will post a simple example soon. Furthermore, u should use the event onfocus instead of onclick on html input fields so u can show ur virtual keyboard when user navigates to input fields even by keyboard or other else

[fxonair]

That would be great. Looking forward for your example. Thanks in advance.

[WeX.tmpvar]

Use example from Examples/4.7/tools/inputpanel =)

The only difference with example, that I'm sending a signal, instead of calling the input panel, and handle it in QML part of the program.

@class myInputContext : public QInputContext
{
Q_OBJECT
public:
myInputContext();
~myInputContext();

    bool filterEvent(const QEvent* event);

signals:
    void calledSoftwareInputOpen();
    void calledSoftwareInputClose();

};@

@myInputContext::myInputContext()
{
}

myInputContext::~myInputContext()
{
}

bool myInputContext::filterEvent(const QEvent* event)
{
if (event->type() == QEvent::RequestSoftwareInputPanel) {
emit calledSoftwareInputOpen();
return true;
} else if (event->type() == QEvent::CloseSoftwareInputPanel) {
emit calledSoftwareInputClose();
return true;
}
return false;
}@

and in main file:
@QApplication a(argc, argv);
myInputContext *aic = new myInputContext;
a.setInputContext(aic);@

[fxonair]

Thank you very much.
I'm new to Qt. Can you please show how to handle those signals in QML part?

[WeX.tmpvar]

You need to set context property in C++ part, and use it property in QML part =)

In C++ part:
@yourDeclarativeView.rootContext()->setContextProperty("myClass", aic);@

In QML part:
@Connections {
target: myClass
onCalledSoftwareInputOpen: { console.log("Called VK!"); }
}@

[hungnd]

Dear fxonair,

Sorry for my late post. This is a simple example which pops up an input dialog to enter text whenever you click on an html input field. Whishing it will be helpful!

mainwindow.h:
@#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include "webbridge.h"

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
Q_OBJECT

public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();

private slots:
void on_webview_loadFinished(bool issuccessful);

private:
Ui::MainWindow *ui;
WebBridge m_webbridge;
};

#endif // MAINWINDOW_H@

mainwindow.cpp:
@#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QtWebKit>

MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
ui->webview->settings()->setAttribute(QWebSettings::JavascriptEnabled, true);
ui->webview->settings()->setAttribute(QWebSettings::AutoLoadImages, true);
ui->webview->settings()->setAttribute(QWebSettings::PluginsEnabled, true);
ui->webview->page()->mainFrame()->addToJavaScriptWindowObject("webbridge", &m_webbridge);
}

MainWindow::~MainWindow()
{
delete ui;
}

void MainWindow::on_webview_loadFinished(bool issuccessful)
{
if (issuccessful) {
const QString script = "var inputs = document.getElementsByTagName('INPUT');var index;for(index=0; index < inputs.length; index++){inputs[index].onclick = function() {this.value=webbridge.openInputContext(this.value);}}";
ui->webview->page()->mainFrame()->evaluateJavaScript(script);
}
}@

webbridge.h:
@#ifndef WEBBRIDGE_H
#define WEBBRIDGE_H

#include <QtCore>

class WebBridge : public QObject
{
Q_OBJECT
public:
WebBridge();

public slots:
QString openInputContext(const QString& orgtext);
};

#endif // WEBBRIDGE_H@

webbridge.cpp:
@#include "webbridge.h"
#include <QInputDialog>

WebBridge::WebBridge() :
QObject()
{
}

QString WebBridge::openInputContext(const QString &orgtext)
{
QString text = QInputDialog::getText(NULL, "Input Box", "Enter your text");
return (!text.isNull()) ? text : orgtext;
}@

Regards,