November 11, 2011

strekazoid strekazoid
Lab Rat
108 posts

Virtual keyboard is covering my TextField when typing text

Page  
1

I have this weird usability issue. I have TextField component. Now you type in text on full touch device by using a keyboard. When I click on my TextField, virtual keyboard is displayed. The problem is, the keyboard is covering my TextField, so I don’t see what is actually typed. I’m sort of out of ideas how this could be solved. Any suggestions are welcomed.

27 replies

November 11, 2011

Hornsj2 Hornsj2
Lab Rat
64 posts

Have you tried explicityly setting the Z value of your textField to something higher than the keyboard item?

e.g. textFieldId.z = virtualKeyboardId.z + 1

If the virtualKeyboard is a parent of the textField it should already render on top. Not sure why it isn’t.

By the way if two items are not in the same parent/child hierarchy and are not siblings, z ordering is not respected (in my experience).

November 14, 2011

roopeshchander roopeshchand..
Lab Rat
38 posts

@strekazoid: Presumably, you’re using Qt 4.7.4 because split-keyboard is not available before that. The InputContext QML element was introduced in Qt Quick 1.1 precisely to address the problem you describe. See: http://doc.qt.nokia.com/qtquick-components-symbian-1.1/splitscreen.html

November 14, 2011

Hornsj2 Hornsj2
Lab Rat
64 posts

Is there a way to tell he’s talking about Symbian? I wouldn’t have addressed this had I known.

November 14, 2011

roopeshchander roopeshchand..
Lab Rat
38 posts

@Hornsj2: Symbian was the first thing that came to my mind – I could be wrong about my guess as well.

I’m curious what your answer pertains to. Are you talking about a virtual keyboard designed in QML (that you refer to as virtualKeyboardId)? Even assuming that’s the case, if we say ‘textFieldId.z = virtualKeyboardId.z + 1’, then the textfield will be drawn over the keyboard, right? Ideally, the TextField should be repositioned so that it occupies the upper part of the screen, so that both the keyboard and the typed text are seen. The link I posted describes how to do this with symbian Qt Quick Components.

November 14, 2011

Hornsj2 Hornsj2
Lab Rat
64 posts

I’m working on an embedded desktop version. I had to write my own virtual keyboard.

It’s a series of buttons (rectangles with mouse areas) and a text field. Everything is placed using anchors.

November 14, 2011

roopeshchander roopeshchand..
Lab Rat
38 posts

@Hornsj: Ok, got it. So, in that case, my opinion was that changing the z of the textField to be above the virtualKeyboard would make it hard to type for the user because he can’t see some of the keys anymore. Hence repositioning the textField, as said above, is a better solution.

November 14, 2011

Hornsj2 Hornsj2
Lab Rat
64 posts

Well, the text field isn’t overlayed upon the keys (it is above them). I’m not sure why anything needs to be repositioned. I think without a picture this isn’t going to be productive. If I get a chance I’ll post one.

November 15, 2011

strekazoid strekazoid
Lab Rat
108 posts

I’m using Symbian TextField component for entering text. When clicking on it, I get phone’s virtual keyboard displayed and hiding my TextField underneath.

I’ve checked the SplitView example, but couldn’t figure out how to apply it to the TextField component.

November 15, 2011

strekazoid strekazoid
Lab Rat
108 posts

One more thing. I have two TextField:s one after another (registration page). How InputContext suppose to help me in this situation?

November 16, 2011

roopeshchander roopeshchand..
Lab Rat
38 posts

@streakaoid: First things first: Are you using Qt 4.7.4 and Qt Quick 1.1? Are you on Symbian? Do you see a split-keyboard?

Assuming the above, the goal here (as I understand) is to ensure that the current textField (that the user is currently typing into) is fully visible. InputContext tells you the area that the virtual keyboard covers at the moment, so that you can reposition your textfield so that it doesn’t overlap with the virtual keyboard.

I’m assuming that in your case, you have a screenful of stuff, with one or more textFields in the bottom half of the screen. When the keyboard comes up, it covers the bottom part of the screen, so only the stuff at the top is visible. The textField at the bottom becomes invisible.

Effectively, when the keyboard is up, the available visible area is reduced. You could now try to squeeze whatever you want visible in the reduced visible area (by reducing the height of the item by inputContext.height). If you cannot accommodate all of that in the reduced area, you can wrap all of it in a Flickable element.

November 16, 2011

roopeshchander roopeshchand..
Lab Rat
38 posts

Just saw that if you set ‘platformSoftwareInputPanelEnabled: true’ in your PageStackWindow, the “reducing the height of the item by inputContext.height” part, that I mentioned earlier, is automatically handled. Maybe you can just try turning that property on to check if that suffices in your case.

http://doc.qt.nokia.com/qtquick-components-symbian-1.1/qml-pagestackwindow.html#platformSoftwareInputPanelEnabled-prop

November 16, 2011

strekazoid strekazoid
Lab Rat
108 posts

@roopeshchander: Yes, I’m on Qt 4.7.4 and Qt Quick 1.1, creating an application for Symbian Anna. To be even more clear, the virtual keyboard is visible only when I run the app on Nokia N8 device, and not visible in simulator.

Did some learning yesterday. Seems that inputContext is returning visible? and height properties depending on if the virtual keyboard visible. This helps, in a way that I can create states and reposition the content on the screen after vkb becomes visible.

What do you call “split keyboard”?

November 16, 2011

strekazoid strekazoid
Lab Rat
108 posts

Is split-keyboard suppose to look something like this?: http://www.developer.nokia.com/Community/Wiki/File:Split_screen_portrait.png

Then no, I don’t see that. I’d like to.

November 16, 2011

strekazoid strekazoid
Lab Rat
108 posts

Found this topic on StackOverflow:
http://stackoverflow.com/questions/7410695/split-screen-keyboard-in-qt-4-7-4

But didn’t worked for me.

November 16, 2011

roopeshchander roopeshchand..
Lab Rat
38 posts

strekazoid wrote:
Is split-keyboard suppose to look something like this?: http://www.developer.nokia.com/Community/Wiki/File:Split_screen_portrait.png

Then no, I don’t see that. I’d like to.

That was before Anna. Anna and beyond, we get a QWERTY keyboard in portrait mode too. Like this: Belle-split-view-qml-app.png [labs.qt.nokia.com]

To enable split-view keyboard:

  • If you don’t use Symbian Qt Quick Components 1.1, set Qt::AA_S60DisablePartialScreenInputMode to false [1]
  • If you use Symbian Qt Quick Components 1.1, do nothing (should already work) [1]

If you don’t get a splti-view keyboard even after doing the above, what are you seeing? Can you post a picture?

[1] http://labs.qt.nokia.com/2011/11/08/qt-4-7-4-release-bundle-for-symbian-news/

Page  
1

  ‹‹ Problem with Qt Quick works on SymbianS60v5      [solved] renaming include files...any way to automate editing? ››

You must log in to post a reply. Not a member yet? Register here!