Keyboard use

[nopram2Member]

Hi,

I’m trying jqDateTimeInput and I found a couple of issues that prevent 100% keyboard use.

1. I haven’t found a standard way of putting a LABEL element on the page and setting its FOR=”xxx” attribute to allow the user to navigate to the jqDateTimeInput.

2. When there is not date set (has a null value), keyboard input is disabled.

I’ve written a workaround for both of them, but I’d like to know if there’s a better way of doing it.

Issue 1: Enabling element LABEL:

$(‘#labelid’).on(‘click’, function() { $(‘#jqWidget’).find(‘input’).focus();});

Issue 2: Enabling typing when there is no value set:

$(‘#jqWidget’).find(‘input’).keydown (function (event) { if ( event.which >= 48 && event.which <= 57 && $('#jqWidget').jqxDateTimeInput('getDate') == null) { $('#jqWidget').jqxDateTimeInput('setDate', new Date());} });

Issue 1 could be considered a nice to have missing feature, but I personally think issue 2 is more of a bug than a missing feature. As it is now, this situation can arise:

– User starts typing a date
– User presses delete key because he entered a wrong number
– Value is deleted, keyboard input becomes disabled and user has no way out other than leaving the keyboard and clicking the calendar button.

Best regards,

Martin

[Peter StoevKeymaster]

Hi Martin,

– We will consider whether to change the behavior regarding issue #2.
– Not sure how putting a LABEL element on the page is related to the jqxDateTimeInput. Could you please provide more details about this?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[nopram2Member]

Hi,

Thanks for your quick response. When I talk about a LABEL I’m talking about a typical FORM where a user enters a bunch of data, as in this very simple example:

Enter your Name

Enter you Surname

Enter your date of Birth

As simple as this example is, it is very keyboard friendly using standard HTML5:

1. You can navigate to any input using an access key
2. The form starts with the first input focused so user can start typing right away.

If I were to replace the “date of birth” input with a jqxDateTimeInput, some keyboard features will be missing. I think a simple solution would be if the ID of the input element inside jqxDateTimeInput could be unique and known. As it is today, the input has always an ID of “inputElement” what prevents it from being useful at all.

Martin

[nopram2Member]

Hi,

Thanks for your quick response. When I talk about a LABEL I’m talking about a typical FORM where a user enters a bunch of data, as in this very simple example:

<form>

<label for=”name” accesskey=”n”>Enter your <u>N</u>ame </label>
<input type=”text” id=”name” autofocus>

<label for=”surname” accesskey=”s”>Enter you <u>S</u>urname
<input type=”text” id=”surname”>

<label for=”dob” accesskey=”b”>Enter your date of <u>B</u>irth</label>
<input type="text" id="dob">

</form>

As simple as this example is, it is very keyboard friendly using standard HTML5:

1. You can navigate to any input using an access key
2. The form starts with the first input focused so user can start typing right away.

If I were to replace the "date of birth" input with a jqxDateTimeInput, some keyboard features will be missing. I think a simple solution would be if the ID of the input element inside jqxDateTimeInput could be unique and known. As it is today, the input has always an ID of "inputElement" what prevents it from being useful at all.

Martin

[nopram2Member]

Sorry, the html didn’t get through.

The example I was trying to post was:

<form>

<label for=”name” accesskey=”n”>Enter your <u>N</u>ame </label>
<input type=”text” id=”name” autofocus>

<label for=”surname” accesskey=”s”>Enter you <u>S</u>urname
<input type=”text” id=”surname”>

<label for=”dob” accesskey=”b”>Enter your date of <u>B</u>irth</label>
<input type="text" id="dob">

</form>

[Peter StoevKeymaster]

Hi Martin,

We will take into account your feedback and make sure that the jqxDateTimeInput will be accessible via the accesskey in the next version. I also think that your solution about keyboard input after pressing the “del” key is great and we will definitely consider adding it to the widget.

A nice feature which will be added in the next version will be the support for the jQuery’s val function. You will be able to get or set a Date in jqxDateTimeInput by doing something like that $(“#dateInput”).val(“2013, 2, 13”) or var value = $(“#dateInput”).val();

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[nopram2Member]

That will be great, thanks!

[Author]

Posts