To handle any HTML event within a page you do the following:
- Create QObject with callback slots to receive the events. It may be some dedicated handler object or an existing object like your QDialog/QMainWindow.
- Register said QObject for JavaScript access with QWebFrame.addToJavaScriptWindowObject(name, object).
- 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).