防止用户在IE浏览器中进行编辑时将光标移动到输入框的末尾

Question

在我的ugal 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="[email protected]"
            required
            [ngClass]="{ 'is-invalid': submitted && f['primaryEmail'].errors }"
            [(ngModel)]="primaryEmail"
            oninput="this.value = this.value.toUpperCase()"
          />

Answer 1

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

为了解决这个问题（经过一番谷歌搜索后，所做的更改是在我的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类似问题的人。