我有两个输入,当用户按Enter键时,我想把焦点从第一个切换到第二个。我试着把jQuery和Vue混合使用,因为我在Vue文档中找不到任何函数来关注一些东西:
<input v-on:keyup.enter="$(':focus').next('input').focus()"
...>
<input ...>
但在输入时,我在控制台中看到错误:
build.js:11079 [Vue warn]: Property or method "$" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in anonymous component - use the "name" option for better debugging messages.)warn @ build.js:11079has @ build.js:9011keyup @ build.js:15333(anonymous function) @ build.js:10111
build.js:15333 Uncaught TypeError: $ is not a function
7条答案
按热度按时间k2arahey1#
你可以试试这样的方法:
**一个
更新
如果目标元素在
form
元素内部,而下一个表单元素不是真实的的兄弟元素,那么可以执行以下操作:超文本标记语言
日本
**第一个e第一个f第一个x
vptzau2j2#
在我看来,从this答案开始,使用
$refs
API是一个更干净的替代方案。使用
$refs
API,可以让您以更简单的方式定位元素,而无需遍历DOM。Example
w8rqjzmb3#
经过一些测试,它起作用了
qaxu7uf24#
试试这个
yeotifhr5#
使用它:
ttp71kqs6#
虽然我喜欢指令答案,因为它可以处理其他元素(样式 Package 器等)中的输入,但我发现它对于来来去去的元素有点不灵活,特别是如果它们根据其他字段来来去去。
相反,我将以下两个不同的指令放在一起。在HTML中按照以下方式使用它们:
在Vue对象上(或在mixin中)定义它们:
在按下回车键时,它在输入列表中查找当前输入的索引,验证它是否可以被提升,并关注下一个元素。
主要差异:长度和索引在点击时计算,使其更适合字段添加/删除;不需要额外的事件来改变缓存的变量。
缺点是,这将是一个有点慢/更密集的运行,但鉴于它的基础上关闭UI交互...
ulmd4ohb7#
Vue.js的指令是满足此要求的良好实践。
定义全局指令:
注意:我们应该排除禁用和只读输入。
使用方法: