Запретить перемещение курсора в конец поля ввода при редактировании пользователем в браузере IE - PullRequest
Новая
       28

Запретить перемещение курсора в конец поля ввода при редактировании пользователем в браузере IE

0 голосов
/ 05 октября 2019

В моем приложении anuglar 7 во всех полях ввода текста я включаю метод, который изменяет значение любого текста, который вводит пользователь, в верхний регистр. В браузерах IE, когда пользователь редактирует введенный текст, курсор автоматически перемещается в конец поля ввода вместо того, чтобы оставаться на месте.

Я подозреваю, что метод, вызывающий проблему, заключается в следующем: 

oninput="this.value = this.value.toUpperCase()"

У меня нет этой проблемы в браузерах Chrome. Что я могу сделать, чтобы предотвратить это в браузерах IE?

Мой HTML-код для поля ввода: 

          <input
            type="text"
            class="form-control col-lg-7"
            id="primary-email"
            formControlName="primaryEmail"
            pattern="[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?"
            placeholder="example@domain.com"
            required
            [ngClass]="{ 'is-invalid': submitted && f['primaryEmail'].errors }"
            [(ngModel)]="primaryEmail"
            oninput="this.value = this.value.toUpperCase()"
          />

1 Ответ

0 голосов
/ 05 октября 2019

Как и предполагалось, проблема возникла из 

oninput="this.value = this.value.toUpperCase()"

Для решения этой проблемы (после некоторого поиска в Google) я создал метод в моем файле TS: 

makeUpperCase(e) {
  const cursorStart = e.target.selectionStart;
  const cursorEnd = e.target.selectionEnd;
  e.target.value = e.target.value.toUpperCase();
  e.target.setSelectionRange(cursorStart, cursorEnd);
}

Затем в файле HTML замените проблемную строку следующим образом: 

(input)="makeUpperCase($event)"

Надеюсь, это поможет всем, кто столкнется с аналогичной проблемой с IE.

...