Question

我有一个自定义的Angular管道，在用户离开input字段之后，该管道将输入的文本转换为一系列的点。当用户重新输入input字段时，无论用户的位置如何，文本都应转换回输入的数据，并且克拉显示在该字段的末尾。

此功能在IE11除外的所有浏览器中均能正常运行，在IE11中，克拉暂时出现在input字段的末尾，然后跳至input字段的开始。可以在此Stackblitz sandbox上看到这种行为。

如何在所有浏览器中将克拉置于input字段的末尾的同时，用Angular管道转换数据？

编辑：我已经重构了我的代码，并按照Zhi Li的答案建议使用了setSelectionRange()。

Answer 1

尝试使用JQuery函数将光标设置在输入字段的末尾。请参考以下步骤：

使用以下注释来安装JQuery：

npm install jquery --save
在angular.json文件中，找到脚本节点，然后添加JQuery脚本：

“脚本”：[“ node_modules / jquery / dist / jquery.min.js”]
使用以下代码设置光标：

component.ts中的代码：

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery'
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit  {
  showSsnMask = true;
  ssnValue= 123456789;

  public ngOnInit(){

    $(document).ready(function() {  
      $("#txtsearch").focus(function(){        
        var input = $(this);
        var len = input.val().length;
        input[0].focus();
        input[0].setSelectionRange(len, len);
      })  
    });
  }
}

component.html中的代码：

<input id="txtsearch"
  type="text"
  (blur)="showSsnMask = true"
  (click)="showSsnMask = false"
  [value]="ssnValue | mask: showSsnMask:9"
/>

输入的Angular 6 PipeTransform在IE11上将克拉向左跳转

1 个答案: