首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何通过在angular 6中按键盘回车将光标从一个输入移动到另一个输入和按钮

在Angular 6中,可以通过使用键盘事件和Angular的模板引用变量来实现按下回车键时将光标从一个输入移动到另一个输入和按钮。

首先,在模板中为每个输入框和按钮添加模板引用变量。例如,假设有两个输入框和一个按钮:

代码语言:txt
复制
<input #input1 (keydown.enter)="moveFocus(input2)">
<input #input2 (keydown.enter)="moveFocus(button)">
<button #button (click)="submit()">Submit</button>

在上面的代码中,我们为每个输入框和按钮添加了一个模板引用变量(#input1,#input2,#button)。然后,我们使用(keydown.enter)来监听回车键的按下事件,并调用相应的方法。

接下来,在组件的类中,定义moveFocus方法来处理按下回车键时的逻辑:

代码语言:txt
复制
import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  @ViewChild('input2') input2: ElementRef;
  @ViewChild('button') button: ElementRef;

  moveFocus(nextElement: ElementRef): void {
    nextElement.nativeElement.focus();
  }

  submit(): void {
    // 处理提交逻辑
  }
}

在上面的代码中,我们使用@ViewChild装饰器来获取模板引用变量的引用。然后,在moveFocus方法中,我们使用nextElement.nativeElement.focus()将焦点移动到下一个元素。

最后,在submit方法中,可以处理提交按钮的逻辑。

这样,当用户在第一个输入框中按下回车键时,焦点将自动移动到第二个输入框;当用户在第二个输入框中按下回车键时,焦点将自动移动到提交按钮。

请注意,以上代码仅适用于Angular 6,并假设你已经正确设置了Angular开发环境。对于其他版本的Angular,可能会有一些差异。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vim 快速入门

中任意一,就可以光标动到最底下那一行,进入底线命令模式(也称为指令列命令模式)。...这个时候,键盘上除了 [Esc] 这个按键之外,其他的按键都可以视作为一般的输入按钮了,所以你可以进行任何的编辑! 如下图所示: ?...vim3.png 注意: vim/vi 中 [Tab] 键是向右移动 8 空格字符。 3. 按下 [ESC] 按钮回到命令模式 如果对文件编辑完毕了,那么应该要如何退出呢?...如果你右手放在键盘上的话,你会发现 hjkl 是排列在一起的,因此可以使用这四按钮来移动光标。...:w [filename]编辑的数据储存成另一个档案(类似另存新档) :r [filename]在编辑的数据中,读入另一个档案的数据。

1.2K20

Linux命令之vim三种模式

4) ③光标动到首行 按键:gg ④光标动到末行 按键:G ⑤翻屏 向上翻屏:按键ctrl + b (before) 或 PgUp 向下翻屏:按键ctrl + f (after) 或 PgDn...②剪切/删除光标所在行为准(包含当前行),向下删除/剪切指定的行 按键:数字dd (删除之后下一行上) ③剪切/删除光标所在的当前行之后的内容,但是删除之后下一行不上 按键:D (删除之后当前行会变成空白行.../向右移动n字符 按键:数字←,数字→ ④末行模式下的快速移动方式:移动到指定的行 按键输入英文“:”,其后输入行数数字,按下回车 四、模式间的切换(重点) ?...可以通过其他命令来切换上一文件/下一文件 输入:“:bn”切换到下一文件(back next) 输入:“:bp”切换到上一文件(back prev) 六、编辑模式 ?...按下按键“ctrl + R”,然后输入“=”,此时光标会变到最后一行 c. 输入需要计算的内容,按下回车 ? 八、扩展 1、vim的配置(重点) Vim是一款编辑器,编辑器也是有配置文件的。

3.5K20
  • 快速学习-Linux(VIM编辑器)

    文件的路径 作用:打开指定的文件,并且光标动到指定行 #vim +/关键词 文件的路径 作用:打开指定的文件,并且高亮显示关键词(搜索) 重点:先复制出一/etc/passwd文件,复制当前桌面下...2.1、命令模式 注意:该模式是打开文件的第一看到的模式(打开文件即可进入) 2.1.1、光标移动 ①光标动到行首 按键:shift + 6 或 ^(T字母上面的6,不要按小键盘的6) ②光标动到行尾...按键:shift + 4 或 $(R字母的左上角的4,不是小键盘的4) ③光标动到首行行首 按键:gg ④光标动到末行行首 按键:G [Capslk 再加 G键] / [Shift + G...② 剪切/删除光标所在行为准(包含当前行),向下删除/剪切指定的行 按键:数字dd (删除之后下一行上) ③ 剪切/删除光标所在的当前行(光标所在位置)之后的内容,但是删除之后下一行不上 按键:...末行模式进入之后的特征:光标最后一行上 编辑模式进入之后的特征:最后一行有类似于“------插入(insert)-----”的提 注意:末行模式编辑模式之间是没有办法直接切换的,必须先走命令模式

    2.7K10

    Windows10中的键盘快捷方式

    Ctrl + 向左键 光标动到上一字词的起始处 Ctrl + 向下键 光标动到下一段落的起始处 Ctrl + 向上键 光标动到上一段落的起始处 Ctrl + Alt + Tab 使用箭头键在所有打开的应用之间进行切换... Shift + 向左键或向右键桌面上的应用或窗口从一台显示器移动至另一台显示器Windows 徽标键+ 空格键切换输入语言和键盘布局Windows 徽标键+ Ctrl + 空格键对之前选择的输入所做的更改...Ctrl + M 输入标记模式 Alt + 所选择的键 开始块模式下选择 箭头键 按指定方向移动光标 Page up 光标向上移动一页面 Page down 光标向下移动一页面 Ctrl +...Home(标记模式) 光标动到缓冲区起始处 Ctrl + End(标记模式) 光标动到缓冲区结尾处 Ctrl + 向上键 输出历史记录中上一行 Ctrl + 向下键 输出历史记录中下移一行...操作 Shift + 单击任务栏按钮 打开应用或快速打开另一个应用实例 Ctrl + Shift + 单击任务栏按钮 以管理员身份打开应用 Shift + 右键单击任务栏按钮 显示应用的窗口菜单 Shift

    4.5K20

    Angular 2 用户输入

    用户点击链接、按下按钮或者输入文字时,这些用户的交互行为都会触发 DOM 事件。 本章中,我们学习如何使用 Angular 事件绑定语法来绑定这些事件。...---- 从一模板引用变量中获得用户输入 你可以通过使用局部模板变量来显示用户数据,模板引用变量通过标识符前加上井号 (#) 来实现。...( 通过 key.enter) 我们可以只在用户按下回车 (enter) 键的时候才获取输入框的值。...(keyup) 事件处理语句会听到每一次按键,我们可以过滤按键,比如每一 $event.keyCode,只有在按下回车键才更新 values 属性。...Angular 可以为我们过滤键盘事件,通过绑定到 Angular 的 keyup.enter 伪事件监听回车键的事件。

    1.7K20

    高手 都喜欢用vim编辑器

    输入模式中,可以使用以下按键: 字符按键以及Shift组合,输入字符 ENTER,回车键,换行 BACK SPACE,退格键,删除光标前一字符 DEL,删除键,删除光标后一字符 方向键,文本中移动光标...按下 ESC 按钮回到一般模式 好了,假设我已经按照上面的样式给他编辑完毕了,那么应该要如何退出呢?是的!没错!就是给他按下 Esc 这个按钮即可!...l 或 向右箭头键(→)光标向右移动一字符如果你右手放在键盘上的话,你会发现 hjkl 是排列在一起的,因此可以使用这四按钮来移动光标。...(常用) 第二部份:一般模式切换到编辑模式的可用的按钮说明 进入输入或取代的编辑模式i, I进入输入模式(Insert mode): i 为『从目前光标所在处输入』, I 为『目前所在行的第一非空格符处开始输入...:w [filename]编辑的数据储存成另一个档案(类似另存新档):r [filename]在编辑的数据中,读入另一个档案的数据。

    64840

    不会vim?看这篇就够了!

    本文概要 介绍vim编辑器中,如何: 移动光标 切换模式 对文本进行删除、查找、替换、复制、粘贴 撤销文本中的操作 ---- 一、vim三种模式 1、命令模式(打开文件默认进入的模式): 该模式下不能对文件直接编辑...- 三、打开文件 Vim的打开文件的方式: (1)#vim 文件路径 作用:打开指定的文件 (2)#vim +数字 文件的路径 作用:打开指定的文件,并且光标动到指定行 (3)#...按键:shift + 6 即输入 ‘^’ ②光标动到行尾 按键:shift + 4 即输入 ‘$’ ③光标动到首行 按键:gg ④光标动到末行 按键:G ⑤快速移动到指定的行 按键:数字G...④粘贴: 按键:p 3、剪切/删除 ①剪切/删除光标所在行 按键:dd (删除之后下一行上) 注意:如果剪切了不粘贴就是删除的效果。...②剪切/删除光标所在行为准(包含当前行),向下删除/剪切指定的行 按键:数字dd (删除之后下一行上) ③剪切/删除光标所在的当前行光标之后的内容,但是删除之后下一行不上 按键:D (删除之后当前行会变成空白行

    3.4K00

    Linux vivim

    输入模式中,可以使用以下按键:字符按键以及Shift组合,输入字符ENTER,回车键,换行BACK SPACE,退格键,删除光标前一字符DEL,删除键,删除光标后一字符方向键,文本中移动光标HOME...按下 ESC 按钮回到一般模式好了,假设我已经按照上面的样式给他编辑完毕了,那么应该要如何退出呢?是的!没错!就是给他按下 Esc 这个按钮即可!...或 向右箭头键(→)光标向右移动一字符如果你右手放在键盘上的话,你会发现 hjkl 是排列在一起的,因此可以使用这四按钮来移动光标。...(常用)第二部分:一般模式切换到编辑模式的可用的按钮说明进入输入或取代的编辑模式i, I进入输入模式(Insert mode): i 为『从目前光标所在处输入』, I 为『目前所在行的第一非空格符处开始输入...:w [filename]编辑的数据储存成另一个档案(类似另存新档):r [filename]在编辑的数据中,读入另一个档案的数据。

    77420

    【Linux文本编辑艺术】:从入门到熟练,Vim大师之路揭秘

    进入编辑模式: 正常模式下按下 i 键进入插入模式,即可开始编辑文本。 保存并退出: 正常模式下输入 :wq 或者 :x 后回车,将会保存文件并退出。...光标动到想要粘贴的位置,然后按下 p 可以复制的内容粘贴到光标后。 撤销重做: 正常模式下按下 u 可以撤销上一次操作。 正常模式下按下 Ctrl + r 可以重做撤销的操作。...如果你右手放在键盘上的话,你会发现 hjkl 是排列在一起的,因此可以使用这四按钮来移动光标。...一是复原,另一个则是重做一次~ 利用这两功能按键,你的编辑,嘿嘿!很快乐的啦! 4....:w [filename] 编辑的数据储存成另一个档案(类似另存新档) :r [filename] 在编辑的数据中,读入另一个档案的数据。

    15210

    Linux vivim

    输入模式中,可以使用以下按键: 字符按键以及Shift组合,输入字符 ENTER,回车键,换行 BACK SPACE,退格键,删除光标前一字符 DEL,删除键,删除光标后一字符 方向键,文本中移动光标...按下 ESC 按钮回到一般模式 好了,假设我已经按照上面的样式给他编辑完毕了,那么应该要如何退出呢?是的!没错!就是给他按下 Esc 这个按钮即可!...l 或 向右箭头键(→)光标向右移动一字符如果你右手放在键盘上的话,你会发现 hjkl 是排列在一起的,因此可以使用这四按钮来移动光标。...(常用) 第二部分:一般模式切换到编辑模式的可用的按钮说明 进入输入或取代的编辑模式i, I进入输入模式(Insert mode): i 为『从目前光标所在处输入』, I 为『目前所在行的第一非空格符处开始输入...:w [filename]编辑的数据储存成另一个档案(类似另存新档):r [filename]在编辑的数据中,读入另一个档案的数据。

    19010

    vim-command

    插入模式 key desc i 从光标当前位置开始输入文件 I 光标所在行的行首插入 a 从目前光标所在位置的下一位置开始输入文字。 A 光标所在行的行末插入。...n 跳到文件中的某一行,“n”表示一数字,如输入数字15,再回车就会跳到文本的第15行。 !cmd 运行shell命令cmd。...一是复原,另一个则是重做一次。利用这两功能按键,编辑起来就得心应手。 命令行模式:删除、复制与粘贴 这就是小数点。意思是重复前一动作。...通过名称就知道是什么操作。特别注意,上面也提过了,想在文件中输入字符时,一定要在左下角处看到INSERT/ REPLACE才能输入。...文件还原到最原始的状态 ZZ 若文件没有更改,则不存储离开,若文件已经更改,则存储后离开 :w[filename] 编辑的数据存储成另一个文件(类似另存新文件) :r[filename] 在编辑的数据中

    83320

    linux的vi命令详解_centos7 vi命令

    命令模式只有一些最基本的命令,因此仍要依靠底线命令模式输入更多命令。 输入模式: 命令模式下按下i就进入了输入模式。 输入模式中,可以使用以下按键: 字符按键以及Shift组合 输入字符。...ENTER 回车键,换行。 BACK SPACE 退格键,删除光标前一字符。 DEL 删除键,删除光标后一字符。 方向键 文本中移动光标。...(常用) 进入输入或取代的编辑模式 按键 说明 i, I 进入输入模式(Insert mode): i 为『从目前光标所在处输入』, I 为『目前所在行的第一非空格符处开始输入』。...:w [filename] 编辑的数据储存成另一个档案(类似另存新档) :r [filename] 在编辑的数据中,读入另一个档案的数据。...这个时候,键盘上除了 Esc 这个按键之外,其他的按键都可以视作为一般的输入按钮了,所以你可以进行任何的编辑。

    10.5K10

    Linux学习(三)——vivim 的使用

    · x 删除当前光标所在处的字符。 · : 切换到底线命令模式,以最底一行输入命令。 2. 输入模式 命令模式下按下i就进入了输入模式。...输入模式中,可以使用以下按键: · 字符按键以及 Shift 组合,输入字符 · ENTER,回车键,换行 · BACK SPACE,退格键,删除光标前一字符 · DEL,删除键,删除光标后一字符...· 方向键,文本中移动光标 · HOME/END,移动光标到行首/行尾 · Page Up/Page Down,上/下翻页 · Insert,切换光标输入/替换模式,光标变成竖线/下划线 · ESC...:w [filename] 编辑的数据储存成另一个档案(类似另存新档) :r [filename] 即将 『filename』 这个档案内容加到游标所在行后面 2....复制光标所在的向下 n 行,例如 20yy 则是复制 20 行(常用) · p, P p 为已复制的数据光标下一行贴上,P 则为贴在游标上一行! · u 复原前一动作,就是撤销。

    45440

    IDEA Intellij小技巧插件

    这种跳转方式非常实用,你根本不用管当前光标什么位置,眼睛只需要盯着需要跳转到的位置,最多三四下按键就能准确把光标定位,开始编辑。...两者最大的差异是,Ace Jump是先按键调出跳转标记,再通过不同功能键(Ctrl,Shift,Alt等)配合书签按键追加额外功能(例如从当前位置选中文本至书签位置)。...IdeaVim插件 另一个个人感觉非常好用的插件是IdeaVim,这个插件的作用是Intellij中模拟Vim的操作方式。咋看上去,似乎是一只有Vim的狂热玩家才会选用的插件。...普通模式下输入 小数点 将在当前光标位置重复上一次修改操作。例如你某一行进行了上述的查找替换,如果立即需要在另一行做同样操作,把光标动到该行按小数点即可。  3. yyp 复制当前行。...按(数字)ctrl+a,可将光标数字加上输入的数字。  11.  ~ - 光标下的字母改变大小写。 g~aw - 改变当前单词的大小写。gU - 当前字母改大写。

    2.6K10

    Linux笔记【005】| vim编辑器使用教程

    a.查找语法(末行模式下): /字符串 对于查找的结果,同样会打开文件的第三种方式一样,进行高亮显示,可以使用Nn进行上一下一结果的切换。 末行模式下输入/root ?...光标移动: 光标默认的命令模式中快速的定位到文档的最后一行,可以按下按键G。 光标从命令模式中快速的切换到文档的第一行,可以按下按键gg。...光标快速的定位到当前文档中的指定行,可以输入数字G。 光标以当前行为准,向上或者向下移动指定的行数,可以输入数字↑/↓。 删除命令: 删除当前行,可以使用按键dd,删除之后下一行上。...删除当前行,下一行不上,可以按下键盘的按键D,删除之后当前行留空。 删除多行,可以使用数字dd,表示以光标所在行为基准,向下删除指定的行数。...特别说明:vim中,删除命令剪切命令是一样,已经删除的内容可以通过粘贴命令显示出来。 复制命令: 复制当前行,可以光标所在的行按下键盘按键yy。

    1.3K20

    Linux文件管理

    其他目录通过挂载可以将它们添加到树中,通过解除挂载可以移除它们。 开始本教程前我们需要先知道什么是绝对路径与相对路径。...输入模式中,可以使用以下按键: 字符按键以及Shift组合,输入字符 ENTER,回车键,换行 BACK SPACE,退格键,删除光标前一字符 DEL,删除键,删除光标后一字符 方向键,文本中移动光标...这个时候,键盘上除了 Esc 这个按键之外,其他的按键都可以视作为一般的输入按钮了,所以你可以进 行任何的编辑。 图片 好了,假设我已经按照上面的样式给他编辑完毕了,那么应该要如何退出呢?是的!...光标动到这个屏幕的中央那一行的第一字符 L 光标动到这个屏幕的最下方那一行的第一字符 G 移动到这个档案的最后一行(常用) nG n 为数字。...:w [filename] 编辑的数据储存成另一个文件(类似文件另存为) :r [filename] 在编辑的数据中,读入另一个文件的数据。

    2.7K40

    Photoshop 2023 资源免费下载(mac+windows全版本都有,包括最新的2023)

    操作的时候,你先用Cmd/Ctrl+T适当的旋转,回车确定,然后使用这组快捷键(Cmd/Ctrl+Shift+Alt+T),直到完成整个样式就可以了。02.让图片覆盖文字上这是剪切蒙板的功能。...拖动方框到其他的区域,松开H键,你就会切换到光标所在的区域,超级方便!04. 快速全图层蒙板当你按住Alt键然后点击图层蒙板按钮的时候,就能创建一盖住所有内容的蒙板。05....11.交互式缩放按住Cmd/Ctrl+空格 按键(虽然会切换输入法,但是没有影响),移动鼠标就可以快速缩放,向左滑动缩小,向右滑动放大,缩放以鼠标光标的初始位置中心。...切换笔刷切换第一最后一笔刷Cmd/Ctrl+] 让图层位置上Cmd/Ctrl+[ 让图层位置下移Cmd/Ctrl+Shift+[ 图层置于底层Cmd/Ctrl+Shift+] 图层置于顶层图层控制技巧...47.取消图层蒙板之间的链接其实这个技巧也很简单,你只需要在图层面板中单击图层蒙板之间的链接图标就可以接触链接关系,用鼠标选中你要移动的部分的缩略图,将其移动到一起的地方就好了。

    3.6K10

    详解ubuntu 20.04 LTS安装记录

    会自动检测Downloads文件夹内的iso文件插入电脑的U ? U内文件备份好,点击Make Startup Disk,弹出对话框“是否镜像写入设备,点击确定。...之类的,不同电脑的按键不一样,有的会显示启动界面的最下方一行文字提示里;可以上网查自己的电脑型号对应的进入BIOS的按键,或者同时狂按F2F12试试看)。...然后调整Boot priority order启动优先级,我电脑的BIOS是用F6来上选项,界面上会有操作按键的提示,可以看看自己电脑的BIOS要用哪个键,有的电脑是可以直接选择一boot直接启动的...直接用默认的第一行选项Ubuntu,按回车即可(这个界面只停留几秒,没作出操作会自动选择当前光标所在项启动)。 ? 开始安装ubuntu 20.04 ? 进入安装引导界面,左侧选框里选择语言。...其他tty可用,但是可视化用户界面黑屏,只有一鼠标光标我还可以控制,黑色屏幕上晃悠???

    3.3K31

    vim配置即.vimrc文件的配置及vim操作技巧

    注意,上面的所有用于range的表示方法都可以通过 +、- 操作来设置相对偏     量。...光标的移动 4.1 基本移动 以下移动都是normal模式下: h或退格: 左移一字符; l或空格: 右移一字符; j: 下移一行; k: 上一行; gj: 移动到一段内的下一行; gk: 移动到一段内的上一行...w: 前单词,光标停在下一单词开头; W: 移动下一单词开头,但忽略一些标点; e: 前单词,光标停在下一单词末尾; E: 移动到下一单词末尾,如果词尾有标点,则移动到标点; b:...请随意在屏幕内移动光标,直至您觉得舒服为止。   2. 按下下行键(j),直到出现光标重复下行。 ---> 现在您应该已经学会如何动到下一讲吧。   3. 现在请使用下行键,光标动到第二讲。...请在正常模式下通过输入 $ 光标动到本节中下面标记有 ---> 的第一行的末尾。   2. 接着输入小写的 a 则可在光标之后插入文本了。大写的 A 则可以直接在行末插入文本。

    4K11

    2023最全vim编辑器教程(详细、完整)-编辑器之神

    它具有多种模式,包括命令模式、插入模式底行模式。命令模式下,用户可以执行各种编辑操作,如移动光标、删除字符、复制粘贴等。插入模式下,用户可以输入文本。...; 四、命令模式 1.光标移动 语法1:^ //键盘输入符号^,光标动到光标所在行的行首 语法2: //键盘输入符号,光标动到光标所在行的行尾 语法3:gg //键盘输入字母gg,光标动到文件的首行...上图中,当输入g时不是正确语法右下角可以看到输入的内容g,当输入g时立刻会执行命令,这里不便演示,只需按语法输入命令即可执行 语法4:G //键盘输入字母G,光标动到文件的尾行 语法5:ctrl...(数字对应的行数,包括了光标所在行),后面行会上填补剪切部分 语法3:D //键盘输入字母D,剪切光标所在行但后面行不会上填补剪切行,剪切行变空 删除语法:删除即剪切后不复制,删除操作使用剪切语法...4.搜索/查找 语法1::/关键词 //键盘输入英文符号:+/+关键词再回车,按关键词查找,查找到的内容会被高亮显示 语法2:N/n //键盘输入字母N/n,光标动到上/下一查找到的内容(属于命令模式

    2.7K50
    领券