Feature request: Add more option for keyCode value in the event input-throttled
See original GitHub issueHi, currently I’m working on search suggestion component. Im finding a solution for when the suggestion box is expanded the user enable use keyboard arrows( up, down) for selecting. I think we can not done it without having event.keyCode value in keydown event for element input.
I check the file https://github.com/ampproject/amphtml/blob/master/src/service/action-impl.js
My idea is change the event listener from input to keydown.
const throttledInput = throttle(this.ampdoc.win, event => {
const target = dev().assertElement(event.target);
this.trigger(target, name, /** @type {!ActionEventDef} */ (event),
ActionTrust.HIGH);
}, DEFAULT_THROTTLE_INTERVAL);
this.root_.addEventListener('keydown', event => {
const deferredEvent = new DeferredEvent(event);
this.addTargetPropertiesAsDetail_(deferredEvent);
throttledInput(deferredEvent);
});
and in function addTargetPropertiesAsDetail_ add the keyCode value
if (event.keyCode !== undefined) {
detail['keyCode'] = event.keyCode;
}
I still not built the development environment yet so I havent tested yet. But it’s good if we can add more value like this.
Issue Analytics
- State:
- Created 6 years ago
- Comments:8 (5 by maintainers)
Top Results From Across the Web
KeyboardEvent.keyCode - Web APIs - MDN Web Docs
Use a keyCode value for an ASCII character produced by a key which is mapped to the same virtual keycode of Windows when...
Read more >JavaScript Keycode List – Keypress Event Key Codes for ...
JavaScript keyboard events help you capture user interactions with the ... Keypress Event Key Codes for Enter, Space, Backspace, and More.
Read more >KeyboardEvent.keyCode deprecated. What does this mean in ...
TLDR: I'd suggest that you should use the new event.key and event.code ... Notice that the key value is different from keyCode or...
Read more >Keyboard: keydown and keyup - The Modern JavaScript Tutorial
There's another event named input to track changes of an <input> field, by any means. And it may be a better choice for...
Read more >Checking for Keyboard Events in JavaScript with Cross ...
keyCode is implemented in all browsers, including the new ones, ... This code initializes key from event.key if that property has a value...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yes, and that does work in the AMPStart example. Maybe my copied code block isn’t sufficiently precise. I’ll churn up a codepen.
Edit: to be precise, the the ampstart travel example, the autosuggest for “Where do you want to go?” allows keyboard navigation of the results list via up and down keys, meaning that there is a workaround for this particular use case. Input-throttle doesn’t allow you to bind arbitrary keys, which could still be an interesting FR. Codepen incoming.
Here’s a minimal codepen. Unfortunately yes it does rely on datalist for the keyboard navigation. Oh well. Deferring to @cvializ.