jQuery UI datepicker: Configure keyboard shortcuts - javascript

I use the jQuery UI datepicker to let the user select a date. It has some shortcuts so that it can be controlled using the keyboard:
page up/down - previous/next month
ctrl+page up/down - previous/next year
ctrl+home - current month or open when closed
ctrl+left/right - previous/next day
ctrl+up/down - previous/next week
enter - accept the selected date
ctrl+end - close and erase the date
escape - close the datepicker without selection
But it seems not user friendly for me. I did not find out myself how to select a date with the keyboard until I read it in the documentation. I guess only few users will find out that they have to press "CTRL + arrow keys" to select a date.
Therefore, I would like to replace the keyboard shortcuts with some other ones. Especially I would like that the user does not have to press the "Control" key when navigating with the arrow keys between days and weeks.
Because I did not find any configuration about this in the documentation, I tried to achieve this aim using some custom javascript, where I listen for keyboard events and set the date manually. But it leads from one problem to another:
It does only work fine after the first date was selected
It interferes when the user uses "CTRL + arrow keys" after navigating with arrow keys only
The date in the input field is immediately updated, unlike when navigating with "CTRL + arrow keys" of the datepicker's original keyboard control
Other shortcuts of the browser do not work because of event.preventDefault()
I know that all of this problems can be solved by additional Javascript again, but I would prefer it if I could just configure this somehow.
Is it possible to configure the shortcuts of the jQuery UI datepicker?

This is not configurable through datepicker. You would have to change the _doKeyDown method source here.
The easiest way to do this would be to extend the widget. It would look something like this:
$.extend($.datepicker, {
_doKeyDown: function(event){
//copy original source here with different
//values and conditions in the switch statement
}
});

you can check this add-on:
http://hanshillen.github.io/jqtest/#goto_datepicker
for more accessibility options.

If its a Jquery date picker then by default it will support all of these shortcut. One issue might be there, i.e. Theme. You can use the CSS CDN given in Jquery Site itself. Then, focus will be visible even. Which is a great click for Accessibility.

If you want to replace one of the shortcuts and do not like coping the code from the repository in case of updating the jquery ui library, use:
// original key down callback
var doKeyDown = $.datepicker._doKeyDown;
$.extend($.datepicker, {
_doKeyDown: function(event){
if(event.which !== $.ui.keyCode.ENTER) {
doKeyDown(event);
}
else {
//do something else
}
}
});
Keep a reference of _doKeyDown before you overwrite it and call it for all other shortcuts.

Related

Capture key input on select (dropdown list) in JavaScript

I'm trying to capture the input on a dropdown in JavaScript when it is focused, but it appears to not throw events.
Without using a third party library, is there anyway to capture this input?
Example: http://jsfiddle.net/m4tndtu4/11/
you don't want a third party library, but tagged your question to jquery.
you also use jquery code inside your jsfiddle, and mix it with native js...
so i assume, that you would at least want to use jquery.
i edited your fiddle the following: http://jsfiddle.net/m4tndtu4/14/
i just deleted everything you wrote, and just entered one 'on' handler:
$("#sel1").on("keyup",function(){ //this captures selection changes
$("#output").css("background-color", "yellow").text($('#sel1 option:selected').text()); // change the css of output and set the text to the value of the selected option
var enteredSearchSequence = String.fromCharCode(e.which);
$("#input").css("background-color", "yellow").text(enteredSearchSequence);
});
currently, it shows only the last pressed key - and also don't work if SHIFT was pressed... but i guess, you can figure out, how to concat the keypress or even delete it, because it's treated as a new search.
btw. given that, you may want to take a look at angularjs or any other mvc - a list and a searchbox is quite easy with those frameworks!

Set focus to the Filter input in a jQuery UI MultiSelect Widget

I am writing a small script which will set focus to the filter text input field of the multi select jquery widget. Based on the documentation, I can subscribe to the click event of the widget like this:
// bind to event
$("#multiselect").bind("multiselectopen", function(event, ui){
// event handler here
});
So I tried this:
$("#MyStatusWidget").bind("multiselectopen", function(event, ui){
// event handler here
$(this).$(".ui-multiselect-filter").contents('input :text').focus());
});
Here is a link to the widget: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
I also tried a couple other methods ($('').is(':text'); etc), but can't get the hook.
Here is the HTML:
<div class="ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix ui-multiselect-hasfilter">
<div class="ui-multiselect-filter">
Filter:
<input type="search" placeholder="Enter keywords">
</div>
<ul class="ui-helper-reset">
</div>
Thank you
I know this is a little old, but in my case i had alot of these widgets on the page. So I did something a little different that worked perfectly.
$("#MyStatusWidget").multiselect({
open: function () {
$(this).multiselect("widget").find("input[type='search']:first").focus();
}
});
When you create your multi select widget simply add the following "open" method.
$("#MyStatusWidget").multiselect({
open: function () {
$("input[type='search']:first").focus();
}
});
For IE10 bowser:
$("#MyStatusWidget").multiselect({
open: function () {
$("input[type='text']:first").focus();
}
});
I haven't tried the first two solutions to see if rrusnak's problems exist. My Solution doesn't have any of the problems rrusnak mentions about the others. This one works with an unlimited number of Selectors on a page and uses simple jQuery along with Eric Hynds recommendations of implementing his multiselect filter system to the multiselect widget:
$("#MyStatusWidget").multiselect({
open: function () {
$(this).multiselectfilter("widget").find('input').focus();
}
}).multiselectfilter({
label: '',
autoReset: true
});
Its clean, can be chained with the other widget options and immediately allows text input without having to first click on the input filter.
IMO Eric should have included an automatic focus in his filter script - as the use of a filter on the widget implies that it is to be used anyway. So having to manually focus to the input field is an unnecessary click for users.
The above two answers worked for me, however there were a number of irritating things with the plugin that happen when the filter is focused. Most notably you can no longer use the arrow keys to select an option, which really takes away keyboard control.
I have implemented a number of changes, that you can find at my github link below.
Fixes tabbing issues with the form
Allows use of the arrow keys to select options while the filter is selected
I have changed the traverse function to be friendly towards filtered lists.
I have changed the traverse function to move up one selection at a time when using the up arrow (instead of going to the top of the list)
Pressing 'f' (or 'ctrl-f') will re-focus on the filter box
Hopefully this helps anyone who has had some of the same issues as myself. The changes are in both the regular multiselect as well as the filter src files.
https://github.com/rrusnak1/jquery-ui-multiselect-widget

Simulate Holding Ctrl Key

I'm currently trying to change the default behaviour of a multiselect element, so that a user can select and deselect multiple values, without having to press the Ctrl key all the while.
I found a simple solution here, but this does not work in ie8 (because in ie, the onmousedown does not apply to option elements).
But I figured, that one could just simulate a pressed control key, whenever the mouse hovers over a multiselect:
$(document).ready(function() {
$('select').hover(function(e) {
var kde = jQuery.Event("keydown");
kde.ctrlKey = true; //something like this
kde.keyCode = 17; //or this - i don't know
$(e.target).trigger(kde);
});
});
Why does this not work?
Is the Ctrl key directly being released again?
Is something wrong with the code?
Am I missing something else entirely?
You can't simulate such events by programmatically pushing keyboard buttons, just like you can't produce a capital A by simulating the shift key while the user pushes the a key on their keyboard. Besides, even if it would work it wouldn't work: on Macs you press cmd, not ctrl, to select multiple elements.
So unfortunately you'll have to drop this approach and look for other options.
You probably need to add a check box for each of your items, rather than a multi select control.
It is easier in code to write functions which uncheck the others when a new one is selected than to prevent this default behaviour.

Forwarding an event to another element using jQuery

I'm making a grid control in HTML/JS and I'd like it to behave as much as possible like Excel. I've got most of the navigation and editing done already but there's one thing I can't figure out and everything I've found online didn't work in my case.
First I'm going to explain a bit how I've implemented it:
I've made the grid using a table and inserted a textbox in each td. The textboxes do not get the focus unless you double click in the cell (much like in Excel). In other words, clicking a cell simply select it and you can edit it by double clicking. You can navigate around by using the arrow keys, this was done by attaching a keypress event handler on the document.
Now, when a cell is selected, I'd like to be able to start editing it simply by typing. To do this, I added some code in my event handler that controls the navigation that checks if the user is typing visible characters (e.charCode != 0) and set the focus in the textbox of the selected cell. That works fine except that the first character the user types isn't received by the textbox. Apparently .trigger is the way to go; here's what I've tried so far
self.editCell.trigger(jQuery.Event('keypress', {which: e.charCode}));
I tried passing more parameters like keyCode, charCode... etc without success.
So what would be the best way to pass the keystroke to the input control?
The only behavior that you are changing is that you want to navigate between other cells with the arrow keys, correct?
Instead of whitelisting actions, why don't you just let the native code handle the heavy lifting and only detect the usage of the arrow keys?
something like:
function cellKeyDown(e) {
if (e.keyCode > 36 && e.keyCode < 40) {
// select a new cell
}
}

How do I ignore a keyEvent in Javascript?

I have a DataTable in YUI. I'm trying to get the table to ignore all keyEvents. I've tried these methods:
YAHOO.util.Event.addListener(singleSelectDataTable, "keydown", function(oEvent) {
YAHOO.util.Event.stopPropagation(oEvent);
});
OR
YAHOO.util.Event.preventDefault(singleSelectDataTable.tableKeyEvent);
OR
singleSelectDataTable.subscribe('tableKeyEvent', function(oArgs) {
YAHOO.util.Event.preventDefault(oArgs.event);
});
I've looked at a couple of YUI examples to intercept click events, but they don't analogize to this specific scenario. I created a standalone HTML test file if that will help: http://pastebin.com/khfR4Stk. The foundational problem is that we don't want to support arrow key up or arrow key down in our tables; it's a scrolling table and in order for it to work properly we would have to adjust the scrolling thumb once the selection goes past the 'shown-window'.
The only other solution I could think of is to subscribe to the tableKeyEvent and then if the keypress is up-arrow, then unselect the newly selected row, selecting the previous row, doing the appropriate analogue for a down-arrow (basically undoing what the keypress just did). This didn't seem like the right solution…
The tableKeyEvent is raised after the up/down arrow key has been handled. So trying to stop that event will not help.
Looking at the _onTbodyKeydown function of the DataTable widget, I noticed that setting the selection mode to an invalid mode disables key arrow key navigation. Luckily it doesn't seem to break the other selection handling. At least not in your example.
So just change selectionMode:"single" to selectionMode:"" and you should be fine :-)
(Of course there is no guarantee that this will work in future versions)
Try creating the equiv of this onclick
function noenter(evt)
{
var k = evt.keyCode||evt.which;
return k != 13;
}
Get the syntax for getCharCode and tell the script that when it receives input, it needs to deny it.
can't you just add an eventhandler that returns false to the keydown event?

Categories