[Angular HTML] Implementing The Input Mask Cursor Navigation Functionality -- setSelectionRange
2023-09-14 08:59:18 时间
@HostListener('keydown', ['$event', '$event.keyCode']) onKeyDown($event: KeyboardEvent, keyCode) { if(keyCode !== TAB) { $event.preventDefault(); } // get value for the key const val = String.fromCharCode(keyCode); // get position const cursorPos = this.input.selectionStart; switch(keyCode) { case LEFT_ARROW: this.handleLeftArrow(cursorPos); return; case RIGHT_ARROW: this.handleRightArrow(cursorPos); return; } overWriteCharAtPosition(this.input, val, cursorPos); this.handleRightArrow(cursorPos); } handleRightArrow(cursorPos) { const valueBeforeCursor = this.input.value.slice(cursorPos + 1); const nextPos = findIndex(valueBeforeCursor, (char) => !includes(SPECIAL_CHARACTERS, char)); if(nextPos > -1) { const newNextPos = cursorPos + nextPos + 1; this.input.setSelectionRange(newNextPos, newNextPos); } } handleLeftArrow(cursorPos) { const valueAfterCursor = this.input.value.slice(0, cursorPos); const previousPos = findLastIndex(valueAfterCursor, (char) => !includes(SPECIAL_CHARACTERS, char)); if(previousPos > -1) { this.input.setSelectionRange(previousPos, previousPos); } }
We can use 'setSelectionRange(start, end)' to set cursor postion, in which start postion = end position.
相关文章
- [Angular] ngx-formly (AKA angular-formly for Angular latest version)
- [Angular] Style HTML elements in Angular using ngStyle
- [Angular 2] Move and Delete Angular 2 Components After Creation
- [Angular 2] @Input & @Output Event with ref
- [Angular 2] Simple intro Http
- [AngularJS] Hijacking Existing HTML Attributes with Angular Directives
- [Angular 8 Unit Testing] Angular 8 Unit Testing -- service
- [ngx-formly] Dynamically disable a Form field with Angular Formly
- [Angular HTML] Implementing The Input Mask Cursor Navigation Functionality -- setSelectionRange
- [Angular HTML] Overwrite input value, String.fromCharCode & input.selectionStart
- [Angular] USING ZONES IN ANGULAR FOR BETTER PERFORMANCE
- [Angular 2] Share Template Content In Another Template With Content Projection <ng-content>
- [Angular2 Form] Create and Submit an Angular 2 Form using ngForm
- [Angular 2] ROUTING IN ANGULAR 2 REVISITED
- [AngularJS] angular-md-table for Angular material design
- [Angular 2] Using ng-model for two-way binding
- [Angular-Scaled web] 4. Using ui-router's named views
- HTML DOM print() 方法 ,html 打印
- Angular的built-in指令
- Angular DefaultDomRenderer2.setProperty - HTML的值是如何从Angular Component flow过来的,以及跨平台支持
- Atitit.angular.js 使用最佳实践 原理与常见问题解决与列表显示案例 attilax总结
- where and when is Angular scope initialized
- Angular 项目中 angular.json builder 字段的可选项介绍
- 如何以可视化方式显示 Angular 应用构建后的 bundle 文件大小
- 关于Angular使用http发送请求后的响应处理
- 使用Angular的property binding给HTML DOM元素的class动态赋值
- Angular Reactive Form里的setNgReflectProperty
- 每个施加在HTML元素上的Angular Directive,运行时都会生成一个新的实例
- Angular应用里的Template Reference变量
- 使用Angular HTTP client对数据模型进行创建操作
- 两个html中div的复用 如何在HTML不同的页面中,共用头部与尾部?iframe标签