- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我已经使用 vue.js
成功完成了一个基本的快速打字游戏.对于“打字框”,我使用了 <input>
,一切正常。然而,当我在我的游戏中添加了更多关卡,用户输入更长的句子时,我发现需要更改我的 <input>
元素转化为<md-textarea>
- 一个 vue.js
组件。
问题:
以下属性与 <input>
一起正常工作<md-textarea>
无法按预期工作:
@keyup="checkAnswer()"
@keydown="keymonitor"
@keydown.ctrl.86="noPaste"
(防止通过 Ctrl+V
粘贴)@keydown.shift.45="noPaste"
(防止通过 Shift+Insert
粘贴)ref="typeBox"
(允许通过 this.$refs.typeBox[0].focus()
关注元素)请引用下面的代码。
我错过了什么吗?请帮我调试一下。谢谢。
注意:我知道它会在 SO 片段功能中引发错误,但我的开发环境中不存在该错误。
export default {
name: 'game',
data () {
return {
disabledKeys: ['ArrowLeft', 'Home']
}
},
methods: {
/**
* prevents pasting via 'Ctrl + V' (@keydown.ctrl.86) and 'Shift + Insert' (@keydown.shift.45)
*/
noPaste: function (event) {
event.preventDefault()
},
/**
* Monitors every single key input in the answer text box.
*
* Prevents using of disabled keys in the text input.
*/
keymonitor: function (event) {
if (this.disabledKeys.indexOf(event.key) >= 0) {
event.preventDefault()
}
}, /*END keymonitor*/
startTimer () {
this.timer.id = setInterval(this.updateTimer, 1000)
this.$nextTick(() => {
this.$refs.typeBox[0].focus()
})
this.game.status = 'in progress'
}, /*END startTimer*/
} /* END methods */
} /* END export default */
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<template>
<md-input-container md-flex="100">
<!-- this one is working -->
<input id="typeBox" autocomplete="off" placeholder="Type here..." ref="typeBox" v-model="answer" @keydown="keymonitor" @keydown.ctrl.86="noPaste" @keydown.shift.45="noPaste"/>
<!-- this one is not working -->
<md-textarea id="typeBox" autocomplete="off" placeholder="Type here..." ref="typeBox" v-model="answer" @keydown="keymonitor" @keydown.ctrl.86="noPaste" @keydown.shift.45="noPaste"></md-textarea>
</md-input-container>
</template>
最佳答案
您可以使用 .native
将函数绑定(bind)到组件根元素的 native 事件。修饰符。请参阅文档 here .
在您的情况下,您可以将 native 事件处理程序添加到 <md-textarea>
像这样的组件:
<md-textarea
id="typeBox"
autocomplete="off"
placeholder="Type here..."
ref="typeBox"
v-model="answer"
@keydown.native="keymonitor"
@keydown.native.ctrl.86="noPaste"
@keydown.native.shift.45="noPaste"
></md-textarea>
关于javascript - VueJS : @keydown, @keyup 和 this.$refs 适用于输入,但不适用于 md-textarea,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42825408/
我想读取帖子的数据并获取用户 key ,然后通过它进行搜索并同时获取用户数据,我尝试过,但它后退了一步,直到它才显示用户名我执行任何其他操作 这是帖子和经过身份验证的用户的 Firebase 实时数据
您知道是否有办法将 js ref 和 css ref 作为单个 ref 包含在 html 中?通常这些 ref 单独包含在 html head 中,但我的经理想知道下游消费者是否有一种简化的方法将这些
我正在使用 Swing+Clojure 开发一个 GUI 应用程序,它需要各种可变数据(例如滚动位置、用户数据、文件名、选定的工具选项等)。 我至少可以看到三种不同的处理这组数据的方式: 创建对所有数
我正在尝试通过 React 使用 ref 属性。我的浏览器出现奇怪的错误,但我无法弄清楚问题出在哪里。谁能向我解释一下为什么我会收到此错误: Error: Invariant Violation: a
在我的程序中,我有模板类,这些模板类主要是用于特殊目的 std::function 的包装器。最小的例子是: template class Foo { public: exp
如果被引用为参数的对象在函数中被修改,是否使用 ref 有关系吗?下面两个函数有区别吗? void DisposeObject(ClassThing c) { c.Dispose(); } vo
尝试将大型但线性的 svn 存储库迁移到 git。 svn 存储库没有标准布局(主干、分支、标签)...只有主干的一个目录。 Ubuntu 12.4 LTS,git 1.7.9.5。 $ git sv
您现在如何设置动态引用? 我收到一个错误 cannot set property of 'test' undefined ,如果我使用 this.someRef['test'] = ref;}/>
试图理解 gerrit 中的 refs/for/refs/* 功能。这个问题与 refs/for/master 无关。 我们什么时候可以使用这个 refs/for/refs/* 功能。 有人可以为此解
我以不同的方式调用 4 种方法时得到不同的结果: static void Main(string[] args) { var emp = new Employee { Name = "ABC"
假设我有以下内容: var t = typeof(Foo).MakeByRefType(); 有没有办法将结果转换回typeof(Foo)? 老实说,我发现的唯一方法是: var t = typeof
我以下列方式使用 ref。那么当在第 5 种方法中创建一个新对象时,是否会一直访问 main 方法中的原始 emp 并在那里创建一个新对象? 如果是,有没有一种方法可以实现相同的功能而无需多次迭代,即
我在文档的 html 标签内有一些文本。文字看起来像这样 I need this text <ref> Some unwanted text </ref> I need thi
一些背景: 前几天我遇到了一些事情,这让我开始思考嵌套函数调用中的重载解析。考虑以下代码: #include void printer(const int &a) { std::cout <<
如果直接从 this.refs 获取元素对象,那么为什么要使用 ReactDOM.findDOMNode? var HelloMessage = React.createClass({ click:f
我在这里做错了什么,或者从 C# 7.2 开始,不支持通过 ref 返回并允许设置的索引器? 作品: public ref byte this[int index] { get { r
看来我现在几乎每天都在这里问问题。我不确定这是好事还是坏事... 今天的“WTF flavor ”涉及我在使用来自 NI Measurement Studio 对象的函数时完全和完全无能为力。与我之前
这个问题在这里已经有了答案: Does foreach() iterate by reference? (10 个答案) Alternative to using ref in foreach? (
给定一个函数声明 dynamic DoSomething(dynamic inputObject) 我可以用枚举调用它作为inputObject: MyEnum myEnum; myEnum = Do
如果我将数组传递给函数并在函数内对数组进行更改,则函数外部存在的数组会反射(reflect)这些效果。例如: var myArr = [1, 2, 3]; function popAll(arr) {
我是一名优秀的程序员,十分优秀!