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

Question

在我的 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()"
          />

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 类似的问题。

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

Prevent cursor from moving to end of the input box when user makes edits, in IE browser

internet-explorer

angular7

uppercase