Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Call for Presentations - Qt World Summit

    QML WebView keyboard focus

    QML and Qt Quick
    3
    6
    6490
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • T
      TheoVanDerWeijst last edited by

      Hello,

      I' m want to use a QML WebView in an application which is controlled only via a keyboard (a remote control). No mouse, no touchscreen.
      Page navigation must be handled via tab key and later via spatial navigation.

      I can make a WebView object and give it keyboard focus but when i press the tab key, nothing happens. Only after clicking via a mouse, a link on the webpage, keys are handled and the WebView object indicates it has no longer active focus.

      Does somebody now how to give keyboard focus to the webpage without using a mouse event. ? I Googled on the subject but couldn't find any hints.

      Kind regard

      Theo van der Weijst

      1 Reply Last reply Reply Quote 0
      • M
        mutaphysis last edited by

        How are you giving it keyboard focus, how do you check it has focus? Could you post some code fragments?

        I would imagine the webpage inside the webview frame is getting the focus after the mouseclick, you could try to call element.focus in your HTML somewhere, possibly in onload or something similar.

        Check the mdc on "element.focus":https://developer.mozilla.org/en/DOM/element.focus

        1 Reply Last reply Reply Quote 0
        • T
          TheoVanDerWeijst last edited by

          This is my test code.

          The tab key is only handled by the browser after selecting a link with a mouse click. The Webview object focus becomes false in that case.

          import Qt 4.7
          import QtWebKit 1.0

          FocusScope {
          width: 1280
          height: 600
          focus: true

          WebView {
              id: web_view1
              x: 35
              y: 20
              width: 1280
              height: 600
              url: "http://www.google.com"
              focus: true
              onActiveFocusChanged:{
                  console.log("Focus = "+ focus);
              }
              Keys.onPressed:{
                  console.log("Key pressed");                 
              }
          }
          
          1 Reply Last reply Reply Quote 0
          • T
            TheoVanDerWeijst last edited by

            width: 1280 height: 600 focus: true WebView { id: web_view1 x: 35 y: 20 width: 1280 height: 600 url: ”http://www.google.com” focus: true onActiveFocusChanged:{ console.log(“Focus = ”+ focus); } Keys.onPressed:{ console.log(“Key pressed”); } }

            1 Reply Last reply Reply Quote 0
            • T
              tobias.hunger last edited by

              TheoVanDerWeijst: Could you please use @ to mark up your code (or use the leftmost icon in the post a reply editor? It makes code so much easier to read. Thanks!

              1 Reply Last reply Reply Quote 0
              • T
                TheoVanDerWeijst last edited by

                Hi, Thanks for the tip. I didn't see the "code" icon.

                I did some more experimenting and it seems that key navigation is working as wanted when the Webview object is NOT part of the FocusScope.

                @
                import Qt 4.7
                import QtWebKit 1.0

                FocusScope {
                width: 1280
                height: 600
                focus: true

                WebView {
                id: web_view1
                x: 35
                y: 20
                width: 1280
                height: 600
                url: ”http://www.google.com”
                focus: true
                onActiveFocusChanged:{
                console.log(“Focus = ”+ focus);
                }
                Keys.onPressed:{
                console.log(“Key pressed”);
                }
                }
                }
                @

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post