How to capture key event on canvas in Vue
Using Vue 2.5, I have a canvas with a key event listener on it:
<template>
<canvas v-on:keyup.esc="abortThing"></canvas>
</template>
<script>
export default {
methods: {
abortThing() {
console.log('you hit escape!');
}
}
}
</script>
The problem is that the listener isn't responding when I hit escape, whether or not I have already clicked on the canvas.
javascript canvas vue.js event-listener
asked Jan 19 at 20:59
GluePearGluePear
2,80253058
add a comment |
Using Vue 2.5, I have a canvas with a key event listener on it:
<template>
<canvas v-on:keyup.esc="abortThing"></canvas>
</template>
<script>
export default {
methods: {
abortThing() {
console.log('you hit escape!');
}
}
}
</script>
The problem is that the listener isn't responding when I hit escape, whether or not I have already clicked on the canvas.
javascript canvas vue.js event-listener
asked Jan 19 at 20:59
GluePearGluePear
2,80253058
add a comment |
Using Vue 2.5, I have a canvas with a key event listener on it:
<template>
<canvas v-on:keyup.esc="abortThing"></canvas>
</template>
<script>
export default {
methods: {
abortThing() {
console.log('you hit escape!');
}
}
}
</script>
The problem is that the listener isn't responding when I hit escape, whether or not I have already clicked on the canvas.
javascript canvas vue.js event-listener
asked Jan 19 at 20:59
GluePearGluePear
2,80253058
Using Vue 2.5, I have a canvas with a key event listener on it:
<template>
<canvas v-on:keyup.esc="abortThing"></canvas>
</template>
<script>
export default {
methods: {
abortThing() {
console.log('you hit escape!');
}
}
}
</script>
The problem is that the listener isn't responding when I hit escape, whether or not I have already clicked on the canvas.
javascript canvas vue.js event-listener
javascript canvas vue.js event-listener
asked Jan 19 at 20:59
GluePearGluePear
2,80253058
asked Jan 19 at 20:59
GluePearGluePear
2,80253058
asked Jan 19 at 20:59
GluePearGluePear
2,80253058
asked Jan 19 at 20:59
GluePearGluePear
2,80253058
asked Jan 19 at 20:59
GluePearGluePear
2,80253058
2,80253058
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I experimented with this for awhile and discovered that browsers don't allow canvas to be focused by default. Any other element that is active though, like a clicked button or active form, will respond to keyup events just fine.
However, there's a property called tabindex that indicates whether something can be focused and in what order if you press tab (hence the name). If we set the tabindex to 0 then it's focused by default. I wasn't able to find documentation to explain the interaction between canvas and keyboard focus. It just seems to be something the browser is generally resisting unlike other element types.
It's a bit fickle to demonstrate in this snippet because it's basically asserting the tabindex for the window. You might need to click on the blue area for it to work here before hitting escape.
Vue.config.productionTip = false;
new Vue({
template: `<div>
<canvas tabindex="0" v-on:keyup.esc="abortThing" style="width:100px;height:100px;background-color:blue"></canvas>
</div>`,
methods: {
abortThing(event) {
console.log(event);
}
}
}).$mount("#app");<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>answered Jan 19 at 22:06
GenericUserGenericUser
803411
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54271346%2fhow-to-capture-key-event-on-canvas-in-vue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I experimented with this for awhile and discovered that browsers don't allow canvas to be focused by default. Any other element that is active though, like a clicked button or active form, will respond to keyup events just fine.
However, there's a property called tabindex that indicates whether something can be focused and in what order if you press tab (hence the name). If we set the tabindex to 0 then it's focused by default. I wasn't able to find documentation to explain the interaction between canvas and keyboard focus. It just seems to be something the browser is generally resisting unlike other element types.
It's a bit fickle to demonstrate in this snippet because it's basically asserting the tabindex for the window. You might need to click on the blue area for it to work here before hitting escape.
Vue.config.productionTip = false;
new Vue({
template: `<div>
<canvas tabindex="0" v-on:keyup.esc="abortThing" style="width:100px;height:100px;background-color:blue"></canvas>
</div>`,
methods: {
abortThing(event) {
console.log(event);
}
}
}).$mount("#app");<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>answered Jan 19 at 22:06
GenericUserGenericUser
803411
add a comment |
I experimented with this for awhile and discovered that browsers don't allow canvas to be focused by default. Any other element that is active though, like a clicked button or active form, will respond to keyup events just fine.
However, there's a property called tabindex that indicates whether something can be focused and in what order if you press tab (hence the name). If we set the tabindex to 0 then it's focused by default. I wasn't able to find documentation to explain the interaction between canvas and keyboard focus. It just seems to be something the browser is generally resisting unlike other element types.
It's a bit fickle to demonstrate in this snippet because it's basically asserting the tabindex for the window. You might need to click on the blue area for it to work here before hitting escape.
Vue.config.productionTip = false;
new Vue({
template: `<div>
<canvas tabindex="0" v-on:keyup.esc="abortThing" style="width:100px;height:100px;background-color:blue"></canvas>
</div>`,
methods: {
abortThing(event) {
console.log(event);
}
}
}).$mount("#app");<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>answered Jan 19 at 22:06
GenericUserGenericUser
803411
add a comment |
I experimented with this for awhile and discovered that browsers don't allow canvas to be focused by default. Any other element that is active though, like a clicked button or active form, will respond to keyup events just fine.
However, there's a property called tabindex that indicates whether something can be focused and in what order if you press tab (hence the name). If we set the tabindex to 0 then it's focused by default. I wasn't able to find documentation to explain the interaction between canvas and keyboard focus. It just seems to be something the browser is generally resisting unlike other element types.
It's a bit fickle to demonstrate in this snippet because it's basically asserting the tabindex for the window. You might need to click on the blue area for it to work here before hitting escape.
Vue.config.productionTip = false;
new Vue({
template: `<div>
<canvas tabindex="0" v-on:keyup.esc="abortThing" style="width:100px;height:100px;background-color:blue"></canvas>
</div>`,
methods: {
abortThing(event) {
console.log(event);
}
}
}).$mount("#app");<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>answered Jan 19 at 22:06
GenericUserGenericUser
803411
I experimented with this for awhile and discovered that browsers don't allow canvas to be focused by default. Any other element that is active though, like a clicked button or active form, will respond to keyup events just fine.
However, there's a property called tabindex that indicates whether something can be focused and in what order if you press tab (hence the name). If we set the tabindex to 0 then it's focused by default. I wasn't able to find documentation to explain the interaction between canvas and keyboard focus. It just seems to be something the browser is generally resisting unlike other element types.
It's a bit fickle to demonstrate in this snippet because it's basically asserting the tabindex for the window. You might need to click on the blue area for it to work here before hitting escape.
Vue.config.productionTip = false;
new Vue({
template: `<div>
<canvas tabindex="0" v-on:keyup.esc="abortThing" style="width:100px;height:100px;background-color:blue"></canvas>
</div>`,
methods: {
abortThing(event) {
console.log(event);
}
}
}).$mount("#app");<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>Vue.config.productionTip = false;
new Vue({
template: `<div>
<canvas tabindex="0" v-on:keyup.esc="abortThing" style="width:100px;height:100px;background-color:blue"></canvas>
</div>`,
methods: {
abortThing(event) {
console.log(event);
}
}
}).$mount("#app");<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>Vue.config.productionTip = false;
new Vue({
template: `<div>
<canvas tabindex="0" v-on:keyup.esc="abortThing" style="width:100px;height:100px;background-color:blue"></canvas>
</div>`,
methods: {
abortThing(event) {
console.log(event);
}
}
}).$mount("#app");<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>answered Jan 19 at 22:06
GenericUserGenericUser
803411
edited Jan 19 at 22:13
answered Jan 19 at 22:06
GenericUserGenericUser
803411
answered Jan 19 at 22:06
GenericUserGenericUser
803411
answered Jan 19 at 22:06
GenericUserGenericUser
803411
803411
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54271346%2fhow-to-capture-key-event-on-canvas-in-vue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
