Imposible to use core-a11y-keys with Inputs

131 Views Asked by kelegorm At 07 October 2015 at 16:37

Dart, Polymer 0.5, Dartium.

In a page I have some div element with core-a11y-keys inside, keys are "up down left right". It works perfectly, some actions are happened after key down.

Also I have input field on the page. And problem is I can't use arrow keys in it because of core-a11y-keys.

Question is: how to avoid destruction behavior?

HTML:

<body>
    <div id="widgetContainer">
        <core-a11y-keys target="{{body}}" keys="up down left right"
                        on-keys-pressed="{{widgetContainer_on_move_keys}}">
        </core-a11y-keys>
    </div>
    <input id="txtInput">
</body>

Original Q&A

There are 1 best solutions below

David Notik On 16 October 2015 at 05:40

Make sure that the target attribute of core-a11y-keys is in fact present and targeting the div, otherwise it will apply to the whole page including your input. See here for more detail on how to do that: https://groups.google.com/a/dartlang.org/forum/m/#!topic/web/k8Wzj6KCfgM

If your input was a child of the div that your core-a11y-keys was targeting, it would be doing what you instructed it to do anywhere in that div: intercepting keystrokes. In that case, you would need to handle the onKeyPress event in the input like <input on-keypress="{{handleInputKeyStrokes}}">:

handleInputKeyStrokes(Event e) {
  // You'll need one or both of these; not sure which.
  e.preventDefault();
  e.stopPropagation();
}

I haven't tried this, and it may be that you need onKeyUp and onKeyDown instead, as in https://stackoverflow.com/a/13746419.

Imposible to use core-a11y-keys with Inputs

There are 1 best solutions below

Related Questions in DART

Related Questions in POLYMER

Related Questions in DART-POLYMER

Related Questions in CORE-ELEMENTS

Trending Questions

Popular # Hahtags

Popular Questions