According to UI Bootstrap's official documentation here, the datepicker component supports keyboard events. However, I have to disable up and down arrow key events. Normally, up and down arrows open datepicker-popup and I should disable this. The documentation does not say anything about this, and I didn't found anything on the web.
I tried the following to disable key events:
<input datepicker-popup shortcut-propagation="true"...
But that must be disabling all key events, and it didnt work either. How can I disable specific key events?
Related
I've got a profile screen with a few simple text and radio button fields. I want to avoid submit button but instead autosave the value of the field onblur event. That approach is becoming more and more common but I am wondering how to resolve that from the accessibility point of view - especially for the text reader viewers. How to inform them that the fields have that autosave functionality in the most effective and convenient way? Should I just add approriate information in aria-label or maybe there is a better way to do that?
In catching a "key" event in CKEditor, we have a case where a dialog is displayed if a key is typed within a certain HTML span.
After the dialog is dismissed, the 1st key typed does not register on the key listener, but all subsequent keys DO register.
Is this something anyone else has seen?
We're using CKEditor in its inline form, in an application framework based on GWT (Google Web Toolkit). It's possible that GWT is somehow messing with event handling, but I'm not sure how that might be.
I tried setting the event priority very high, but that didn't solve the problem.
After I noticed that the text insertion cursor was not visible until after I tried to type a character after the dialog was dismissed, I tried explicitly setting focus after the dialog is dismissed. This ended up fixing the issue.
I'm not sure why focus would not be on CKEditor until after I did that, or until after a character is typed, but that appears to be the fix.
I need to some manual functionality while drag and drop the text. But I could not find the specific events to listen this event in ckeditor. Could you help me out?
CKEditor at the moment (1) doesn't provide any event or handles the drop actions in any way. Everything that you see is the default behavior of each browser.
So use the DOM and use your own listeners.
1: They plan to change this for the next version, but I can't foretell if they will provide what you want.
I want to know if there is any way to navigate Dialog components by pressing the Enter Key in the same manner natively implemented by the TAB key?
Though I haven't tried it by handling the keyDown and keyUp events certainly it seems doable. Though you may not be able to intercept the browser produced dialog boxes this way and other dialogs created using Window.alert(). How are you creating the dialogs ?
The tab key is the browser doing the work of changing focus - nothing special needs to be added, you'll find that tab works on any form on the internet (except where explicitly disabled for some reason...).
To move focus with the enter key, you must listen for the onkeydown event (focus change via tab also occurs onkeydown, so selecting this for consistency), check if it was the enter key, and if so, move focus to the next element in the list.
Typical tab focus behavior involves the browser checking the tabIndex of the elements on the page, and finding the next element on the page with a higher tabIndex, or the nearest subsequent sibling/cousin element. I don't have a method to implement this easily, so instead I'm going to focus on just going to the next widget.
GXT 3's FormPanelHelper has some handy methods to look for all Fields - this code could be used as a basis for non-GXT fields as well. Track all FocusEvent and BlurEvent from the fields found in the dialog, and use that to always track the currently focused field. Add a key handler to the dialog itself, to capture all key events, and check if one is the enter key. If so, figure out what the next field is from the currently focused field, and invoke .focus() on it - this will trigger the focus handler described above, so your bookkeeping will be updated correctly.
And as #eliran-m noted, consider leaving the tab key alone - don't get in the way of users navigating the way they are used to. Adding new functionality might be a good thing, but taking away expected behavior probably isn't.
I'm experimenting with ways to have tooltips work across a variety of mobile devices. Unfortunately, the span of devices I need to support ranges from Nokias to iPhones.
Unfortunately, some of the browsers I'm dealing with don't support the use of the title attribute for tooltips on focus. As such, I need to come up with a different solution.
For starters, I'm playing with pure-css tooltips: http://psacake.com/web/jl.asp
This method uses the :hover pseudo class to position and set the z-index of a SPAN to create the tooltip.
On an iPhone, this produced an odd side effect. Tapping the link once exposes the tooltip require a second tap to actually activate the link.
However, applying a simple style to a different link's :hover pseudo-class (changing the background color) does not have the same effect. One tap triggers both the style and the link (you see the :hover style briefly before the next page loads).
I've solved this issue for mobile devices by switching to using the :focus pseudo-class which appears to not be triggered by the iPhone (and the Nokia touch device I am using). Of course, that's not ideal if this app were to be used on a desktop browser as well.
So...the question: Is there documented logic as to when the iPhone Safari browser decides to interrupt a click event on a link to expose the :hover pseudo-class vs. not interrupting and letting the link be triggered on the first tap?
I was trying to find you a link in Apple's documentation, but the most specific I could find about :hover was that it is emulated and can cause unexpected results. I did find one place that said it is only shown if the user taps and holds the object. That page (near the bottom, "Don't Use Unsupported iOS Technologies") also says that normal tooltips (using the title attribute) would be shown when that happens also.
If you will accept an assumption as to why the behavior is different for changing the style and displaying a tooltip, I would guess that it is similar to the way mousemove events are handled. This Handling Events page says that, if the contents of the page change during a mousemove event, the rest of the events in the chain (including mouseup) are not sent. I am assuming that this behavior also applies to :hover. If you are using display: none to hide the tooltip, you could try using visibility: hidden instead as it is interpretted as "the object is still here, but you can't see it."