如何在Angular 2中在输入框光标位置插入字符串

首先，先明确你的需求：现有绑定了objEmailTemplates.Name的输入框，当前值为"Hi ,your order will be placed on "，需要在光标所在位置插入指定字符串（比如'Piyush'和'22-25-2018'），最终得到目标文本。下面是具体实现步骤：

1. 调整模板结构，获取输入框引用 #

你原来的输入框带有disabled属性，这会导致无法获取光标位置，所以如果要进行光标定位插入，需要先移除disabled（或者通过按钮触发插入时临时启用）。同时，我们需要设置模板引用变量，方便后续获取输入框的原生DOM元素：

<input 
  type="text" 
  name="Name" 
  #emailTemplateInput 
  [(ngModel)]="objEmailTemplates.Name" 
  placeholder="Enter the name" 
  class="form-control" 
  required
>
<!-- 添加触发插入的按钮 -->
<button (click)="insertText('Piyush')">插入用户名</button>
<button (click)="insertText('22-25-2018')">插入日期</button>

这里把模板引用变量设为#emailTemplateInput，方便后续在组件类中获取元素。

2. 在组件类中实现光标插入逻辑 #

在你的组件.ts文件中，通过ViewChild获取输入框元素，然后编写插入文本的核心函数：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  // 组件元数据（如selector、templateUrl等，根据你的项目配置填写）
})
export class YourComponent {
  objEmailTemplates = {
    Name: "Hi ,your order will be placed on "
  };

  @ViewChild('emailTemplateInput') emailTemplateInput!: ElementRef<HTMLInputElement>;

  insertText(textToInsert: string): void {
    const inputElement = this.emailTemplateInput.nativeElement;
    const startPos = inputElement.selectionStart;
    const endPos = inputElement.selectionEnd;
    const currentValue = inputElement.value;

    // 将原字符串从光标位置拆分，中间插入带单引号的目标文本
    const newValue = currentValue.substring(0, startPos) + `'${textToInsert}'` + currentValue.substring(endPos);
    
    // 更新ngModel绑定的值
    this.objEmailTemplates.Name = newValue;

    // 插入后自动把光标移到插入文本的后面，提升编辑体验
    setTimeout(() => {
      inputElement.selectionStart = inputElement.selectionEnd = startPos + textToInsert.length + 2; // +2是因为我们给文本加了单引号
    }, 0);
  }
}

3. 关键逻辑说明 #

• 获取光标位置：通过inputElement.selectionStart和selectionEnd可以获取当前光标选中的起始/结束位置（如果没有选中内容，两者值相同）。
• 拼接新字符串：把原字符串从光标处拆分为前后两段，中间插入目标文本后重新拼接，保证插入位置准确。
• 调整光标位置：用setTimeout是因为Angular更新DOM需要短暂时间，确保ngModel的值更新后再调整光标，让光标停在插入文本的末尾，方便继续编辑。

4. 针对输入框需保持禁用的场景 #

如果你的输入框必须保持disabled状态，只允许通过按钮预设位置插入文本，那可以直接用字符串替换的方式，不需要操作光标：

// 在"Hi "后插入用户名
insertUsername(): void {
  this.objEmailTemplates.Name = this.objEmailTemplates.Name.replace("Hi ", "Hi 'Piyush', ");
}

// 在"on "后插入日期
insertDate(): void {
  this.objEmailTemplates.Name = this.objEmailTemplates.Name.replace("on ", "on '22-25-2018' ");
}

这种方式更简单，适合输入框禁用、不需要用户手动定位光标的场景。

内容的提问来源于stack exchange，提问作者Piyush Kashyap