qtqwebviewqwebpage

How get a focus element in QWebView/QWebPage?

i need to be able to react on focus changes in QWebPage. I used microFocusChanged() signal and it gives me almost desirable behavior, but anyway i don't know how to know which element is selected. I want to do some actions when any editable element on page gets or loses focus.

Thank you in advance

Solution

  • To handle any HTML event within a page you do the following:

    1. Create QObject with callback slots to receive the events. It may be some dedicated handler object or an existing object like your QDialog/QMainWindow.
    2. Register said QObject for JavaScript access with QWebFrame.addToJavaScriptWindowObject(name, object).
    3. Write JavaScript to add HTML event handlers that call your registered QObject's callback slots.

    JavaScript to add focus change handlers should traverse all text elements and add onfocus and onblur handlers. Better yet is to add single handler to documentElement and use event bubbling. Unfortunately, onblur ad onfocus do not bubble. Fortunately, they have a bubbling counterparts called DOMFocusIn and DOMFocusOut.

    Here's a complete examlpe of catching focus in/out events for page text elements. It declares two slots handleFocusIn and handleFocusOut on the main window to be called from JavaScripts and registers main window as a global JavaScript variable named MainWindow. In then runs JavaScript to bind DOMFocusIn/DOMFocusOut events to these slots (indirectly, because we need to filter out non-text elemnts).

    import sip
sip.setapi("QString", 2)
sip.setapi("QVariant", 2)
from PyQt4 import QtCore, QtGui, QtWebKit

class MyDialog(QtGui.QMainWindow):

    def __init__(self):
        super(MyDialog, self).__init__()
        self.setWindowTitle("QWebView JavaScript Events")

        web_view = QtWebKit.QWebView(self)
        web_view.setHtml("""
            <html>
                <body>
                    <input type="text" name="text1"/><br/>
                    <input type="text" name="text2"/><br/>
                    <input type="submit" value="OK"/>
                </body>
            </html>""")
        self.setCentralWidget(web_view)

        main_frame = web_view.page().mainFrame()
        main_frame.addToJavaScriptWindowObject("MainWindow", self)

        doc_element = main_frame.documentElement()
        doc_element.evaluateJavaScript("""
            function isTextElement(el) {
                return el.tagName == "INPUT" && el.type == "text";
            }
            this.addEventListener("DOMFocusIn", function(e) {
                if (isTextElement(e.target)) {
                    MainWindow.handleFocusIn(e.target.name);
                }
            }, false);
            this.addEventListener("DOMFocusOut", function(e) {
                if (isTextElement(e.target)) {
                    MainWindow.handleFocusOut(e.target.name);
                }
            }, false)
        """)

        self.resize(300, 150)

    @QtCore.pyqtSlot(QtCore.QVariant)
    def handleFocusIn(self, element_name):
        QtGui.QMessageBox.information(
            self, "HTML Event", "Focus In: " + element_name)

    @QtCore.pyqtSlot(QtCore.QVariant)
    def handleFocusOut(self, element_name):
        QtGui.QMessageBox.information(
            self, "HTML Event", "Focus Out: " + element_name)


app = QtGui.QApplication([])
dialog = MyDialog()
dialog.show()
app.exec_()

    (I may rewrite in in C++ if you REALLY can't figure out Python).