Угловой 6 PipeTransform на входе переходит карат влево на IE11 - PullRequest
Новая
       15

Угловой 6 PipeTransform на входе переходит карат влево на IE11

0 голосов
/ 18 апреля 2019

У меня есть пользовательский угловой канал, который преобразует введенный текст в серию точек после того, как пользователь покидает поле input. Когда пользователь повторно вводит поле input, текст должен преобразовываться обратно во введенные данные, причем карат отображается в конце поля, независимо от места размещения пользователя.

Это прекрасно работает во всех браузерах, кроме IE11, где карат на мгновение появляется в конце поля input, а затем переходит к началу поля input. Такое поведение можно увидеть в этой песочнице Stackblitz .

Как я могу преобразовать данные с помощью угловой трубы, сохраняя карат в конце поля input во всех браузерах?

Редактировать : Я изменил код своего кода и использовал setSelectionRange(), как подсказывает ответ Чжи Ли.

1 Ответ

1 голос
/ 18 апреля 2019

Попробуйте использовать функцию JQuery, чтобы установить курсор в конце поля ввода.Пожалуйста, обратитесь к следующим шагам:

  1. , используя следующий комментарий для установки JQuery:

    npm install jquery --save

  2. В файле angular.json найдите узел scripts, затем добавьте сценарий JQuery:

    «scripts»: [«node_modules / jquery / dist / jquery.min.js»]

  3. с помощью следующего кода для установки курсора:

Код в 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"
/>
...