[Angular HTML] Implementing The Input Mask Cursor Navigation Functionality -- setSelectionRange

  @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.

时间: 2024-10-17 21:50:58

[Angular HTML] Implementing The Input Mask Cursor Navigation Functionality -- setSelectionRange的相关文章

[Angular 2] Passing Template Input Values to Reducers

Angular 2 allows you to pass values from inputs simply by referencing them in the template and passing them into your Subject.next() call. This lesson shows you how to make a number input and pass the value so you can configure how much you want the

angular表单验证实例----可用的代码

前段时间,公司做一个单页面,就是一个表单验证,早开始在菜鸟教程上关注了angular,所以下派上用场了 angular里面对于表单验证,设置了很多指令. 也就是说不用自己写一些逻辑,直接绑定指令就行. ng-app     启动你angular的模块 ng-controller 控制器,启动你angualr里面的逻辑代码作用在页面上 ng-options  循环你select里面的option标签,很好用的 ng-submit,表单提交执行的 novalidate  表单form配合后期检测的

angular指令大全

这篇文章的案例都是来自官方,引用的cdn来自bootcss, 因为angular的官方网站被屏了, 所以要翻, 不过我把整个文档下回来了,方便大家下载可以点击: 打开下载英文版 angular的指令 a标签(也就是html的锚标签): angular的所有事件直接绑定在元素的上,而且事件都是以“ng-****”开头,比如ng-click,ng-keydown,ng-keypress,ng-mouseover.... 基本的绑定事件代码, 点击a标签会触发该控制器内部$scope的alert事件;

angular filter

首先我们先看看angular自带的过滤器 1.number filter $filter("number")(22.311,2) = 22.31; 2.date filter $filter("date")(timeStamp,'yyyy-MM-dd')  : 将long型的时间戳转换为YYYY-MM-DD时间格式 3.自定义过滤器 angular.module("myApp").filter("GetDeptNameBydeptId&

Angular - 100

练习1:{{greeting.text}}会根据input的值而改变 <!doctype html> <html lang="en" ng-app> <head> <meta charset="utf-8"> <title>Angular</title> </head> <body> <input type="text" ng-model = &

input子系统学习之四:核心层

核心层:给事件层和设备层提供接口,规范编程接口. 一.  输入子系统核心分析. 1.输入子系统核心对应与/drivers/input/input.c文件,这个也是作为一个模块注册到内核的.所以首先分析模块初始化函数. 1 .cnblogs 2. 输入子系统的核心其他部分都是提供的接口,向上连接事件处理层,向下连接驱动层.    向下对驱动层的接口主要有:    input_allocate_device    这个函数主要是分配一个input_dev接口,并初始化一些基本的成员,这就是我们不能简

关于angularjs框架中input按回车事件光标跳转到另一个input上

我们项目里用到angularjs 对应的包,没有ng-keypress\ng-keydown. 所以,我们自己写一些指令. 首先在,项目模块对应的module.js中写指令 define([ 'angular', 'angular-couch-potato', 'angular-ui-router', 'angular-resource' ], function (ng, couchPotato) { 'use strict'; var module = ng.module('app.handO

[Angular] Create a ng-true-value and ng-false-value in Angular by controlValueAccessor

If you're coming from AngularJS (v1.x) you probably remember the ng-true-value and ng-false-value directive which allowed to map custom boolean values like "yes" or "no" or whatever other value you had, onto your HTML form. In this les

Angular单元测试与E2E测试

本文介绍了Angular单元测试和E2E测试的配置与测试方法.示例APP使用Angular 7 CLI创建,已配置好基础测试环境,生成了测试样例代码.默认,Angular单元测试使用Jasmine测试框架和Karma测试运行器,E2E测试使用Jasmine测试框架和Protractor端到端测试框架. 配置单元测试 Jasmine是一个用于测试JavaScript的行为驱动开发框架,不依赖于任何其他JavaScript框架.Karma是测试运行器,为开发人员提供了高效.真实的测试环境,支持多种浏