Show keyCode of Pressed Key via Go and Vue.js
source link: http://siongui.github.io/2018/01/23/show-keyCode-of-pressed-key-via-gopherjs-vue/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Show keyCode of Pressed Key via Go and Vue.js
January 23, 2018
Example for getting keyCode of pressed key of focused HTML input element via gopherjs-vue.
See the following the HTML code:
HTML
<div id="vueapp">
<input type="text" @keyup="ShowKeyCode" placeholder="Press Any Key Here" />
<div>The keyCode of the keypress: {{ keypressed }}</div>
</div>
When the input element is focused and user press some key, the keyCode of the pressed key will be shown below the input element.
The following is the Go code for above HTML code:
Go
package main
import (
"github.com/gopherjs/gopherjs/js"
"github.com/oskca/gopherjs-vue"
)
type Model struct {
*js.Object // this is needed for bidirectional data bindings
Keypressed string `js:"keypressed"`
}
// this would be recognized as Show in html
func (m *Model) ShowKeyCode(event *js.Object) {
m.Keypressed = event.Get("keyCode").String()
}
func main() {
m := &Model{
Object: js.Global.Get("Object").New(),
}
// field assignment is required in this way to make data passing works
m.Keypressed = ""
// create the VueJS viewModel using a struct pointer
vue.New("#vueapp", m)
}
The above Go code is equivalent to the following JavaScript code:
JavaScript
'use strict';
new Vue({
el: '#vueapp',
data: {
keypressed: ""
},
methods: {
ShowKeyCode: function (event) {
this.keypressed = event.keyCode;
}
}
});
The full code example can be found on my GitHub.
References:
Recommend
-
34
Hello, in this post I am going to show you how to find keycode in JavaScript. I will create a JavaScript function that will print the keycode of the pressed key. I will show you by printing the keyCode in the...
-
8
byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=9755 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。...
-
14
Problems with KeyCode in c # UWP advertisements I use this code to recognize wich key is pressed, but when I try to recognize the arrows it ju...
-
5
Key-Chord This package implements support for mapping a pair of simultaneously pressed keys to a command and for mapping the same key being pressed twice in quick succession to a command. Such bindings are called "key chords".
-
10
Is there an event that triggers when the keys are pressed when editing a cell? advertisements Is it in any way possible to capture events ...
-
10
Repeated arrow key pressed in Jtable advertisements On JTable, when down arrow key is pressed repeatedly, multiple...
-
8
Simulate enter key pressed via Go/ GopherJS, i.e., programmatically fire enter key event in browsers without user intervention. JavaScript From
-
3
键盘事件包含onkeypress onkeydown和onkeyup事件，其中onkeypress事件是在键盘上的某个键被按下并且释放时触发此事件的处理程序，一般用于 键盘上的单键操作。onkeydown事件是在键盘上的某个键被按下时触发此事件的处理程序，一般用于快捷键的操作。onkeyup事件是在...
-
7
扫一扫，转发文章 这里列出 adb 的 input keyevent 中使用的 keycode 大全原始页面：
-
10
Vim 的按键映射在 GUI 情况下的支持是相当完备的, 例如 <M-...>, <D-...>
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK