Hi, I would like to manage a set a keyboard shortcut in my app (like

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

using keypress to manage keyboard shortcut not only in a textarea ? about ui-utils HOT 3 CLOSED

angular-ui commented on September 15, 2024

using keypress to manage keyboard shortcut not only in a textarea ?

from ui-utils.

Comments (3)

ProLoser commented on September 15, 2024

Try putting it on the <body> tag.

from ui-utils.

clakech commented on September 15, 2024

Hi,

Thanks for your answer.

I can't do this because I don't wan't those shortcuts to be activated on every view of my app, only in a specific view, so I would like the directive to be inside this specific view, on a div for instance or any other tag on this view.

Since I didn't manage to use ui-keypress, I move to mousetrap.js

If I found a way to use ui-keypress for my need, I will use it because mousetrap.js is not angular 'ready', so I need to add a few $scope.$apply() in my code and I prefer to avoid this.

Regards,

from ui-utils.

yaru22 commented on September 15, 2024

@clakech You can use ui-keypress on div element by having tabindex="0" attribute on that div. Checkout http://stackoverflow.com/questions/148361/how-can-i-give-keyboard-focus-to-a-div-and-attach-keyboard-event-handlers-to-it and http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/SCR29.html for more information on tabindex.

e.g.

<div style="outline: 0; border: 1px solid red;" tabindex="0" ui-keypress="{13:'keypressCallback($event)'}">
  Click inside this div and hit [Enter]. You can make any element accept keyboard event by adding tabindex="0" attribute to the element.
</div>

I'll create a PR with this updated example.

from ui-utils.

Recommend Projects