Mobile Device Keyboard

[dishmannParticipant]

Well I finally stood up my app posted it to the web and….it was great on my PC Browser.
Still there are some challenges I have to adapt to when using the app on a mobile device.

Lets start with keyboard control. As you know there are no F-Keys. I have coded my grid on the PC Browsers so that when I click the “Enter” key the selected cell is advanced to the next cell in the row.
Still when considering the screen shot below from my iPad, I do not have an “Enter” key.

When I use the demos from the jqx Site I see an “Enter” key.
I need help here. I understand that with HTML 5 mobile browser’s configure themselves for email, phone numbers, etc… Using HTML directly I have a bit of control. However using the Grid I do not have control (or do I).

So how do I make the “Go” keyboard button display “Enter” and more importantly act like an enter key.
Also I wanted to make my own keyboard for numeric entry.

Can you point me in the right direction please. Thanks

[HristoParticipant]

Hello dishmann,

You could use the handlekeyboardnavigation callback and check all strokes on the keyboard that you want to modify.
Please, take a look at this example.
You could use this as a base to change the initial behavior.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[dishmannParticipant]

Hi Hristo,

Yes I do have the handlekeyboardnavigation event coded and it works fine in all PC (Personal Computer/Desktop computers) Browsers.

Issue is occurring on iPad Chrome/Safari browsers, the keyboard event is not even fired. (I put code in to validate that.)

I believe it has something to do with the Go button style keyboard and why it appears when I am editing my jqxGrid (Textbox column for those that need to know).

In this circumstance I am using ASP.NET with a master page but that should not make a difference ??!???.

[HristoParticipant]

Hello dishmann,

You could bind the default ‘keyup’ event and need to catch the key value ’13’.
Please, take a look at this workaround.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[dishmannParticipant]

First sorry to get back at this so late.
Had to work work that pays the bills….

However, thanks to Hristo’s example I was able to find out what happened.

OK the crux of the issue is I am working in the .NET environment. So what I did was take his html example provided above and put it into an .Net aspx web page. Then add the differences to the Grid setup from my issue page to the example provided. No matter what I did I could not duplicate the issue. Until I started making changes surrounding the grid div.

the key change is:
====== Code snippet ========
Please, start to edit cell from ‘Last Name’ column when you are ready with the editing press Enter/Go/return this will navigate to the ‘Product’ column and begin edit the neighbor cell.

    <form id="form1" runat="server">
        <div id="jqxgrid"></div>
        <div id="log"></div>
    </form>

===============================

Notice that in this case I wrapped a form around the divs used by the original code.
I put this page on my site at http://www.gen-e-sys.com/ProjectOrganizer/TestPage.aspx

I’ll keep it there for as along as I can…

When you open this page in the Chrome browser from a Windows PC (Sorry I do not own a Mac but would like to)
It all works fine.

But when I load the same page on my iPad Pro I Then see the “Go” button on the virtual keyboard instead of the “return” button that we see in the demo code. Also when the Go button is pressed after editing the Last Name it appears that the “form” is submitted instead of the keyup handler being called.

I can get the return key to appear again if I remove the runat=”server” for tag attribute. But the form is being submitted when I press the Enter key. I have not tried it on an iPhone however my Pixel phone does the same thing.

PLEASE, PLEASE, PLEASE….

This is the “showstopper” that stops me from recommending this frameworks and putting my money where my mouth is as far as renewing.

Please help. I really do like the framework and would hate to have to write a separate mobile app without it for Mobile devices.

Thanks
and Best regards to all.

Rob

[dishmannParticipant]

Hi Again.

It occurred to me today to check if this is a .NET issue only. So…
I cut and pasted the code from the .Net aspx file to a straight html file.

Link below….

http://www.gen-e-sys.com/ProjectOrganizer/TestPage.html

When I run the html page on my iPad, after tapping the Enter Key on the iPad virtual keyboard to complete my edit, the form was submitted.

Hope to have an answer from you all. I cannot believe no one else has gotten this issue. The form tag is a primary element of html.

[HristoParticipant]

Hello Rob,

You could prevent submitting the form via “preventDefault” option.
Please, take a look at this example:

document.querySelector("#form1").addEventListener("submit", function (event) {
    event.preventDefault();
});

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[dishmannParticipant]

Hristo and all of the support team….

That worked. As I stated not only did I renew but I took it to the next level.
For others that are following this thread or may read it in the future I am going to remove the test files referenced earlier in this thread. Just to keep the site clean. (I’m busy so they may be around for a few weeks.)

I am hoping this one fix will work in a web app that I invested much time in that is way too complex to even bring to the forums.

But again… thank you for helping with this issue. (and all the other issues I run into)

[Author]

Posts