Angular文本框中间输入时光标自动跳至末尾的异常问题求助

Let's break down why this frustrating cursor jump issue is happening and walk through actionable fixes.

Root Cause Analysis #

The most likely culprit here is your (ngModelChange) handler. When you type in the textarea, this event fires immediately, triggering onChangeDesc(i) and commonUtilService.onValueChange(i,inventory). If either of these methods:

• Directly modifies the inventory.overrideDescription value (like trimming, formatting, or overwriting it)
• Triggers Angular's change detection in a way that forces the textarea to re-render

Angular will reset the textarea's value to the updated overrideDescription, which automatically shoves the cursor to the end of the text. That's why you see weird partial inputs like "Line I Descriptiontem"—the first character gets inserted, the cursor jumps, and subsequent characters land at the end.

Fixes & Workarounds #

1. Audit Your ngModelChange Handlers First

Start by digging into what onChangeDesc and commonUtilService.onValueChange are actually doing:

• If they're modifying inventory.overrideDescription directly, stop doing that in the ngModelChange flow. Instead, handle input transformations before the value binds to the textarea, or use a pure pipe for formatting.
• If they're triggering unnecessary change detection (like updating unrelated properties of the inventory object), optimize the logic to only run when absolutely needed.

2. Manually Preserve and Restore Cursor Position

If you must modify the bound value in ngModelChange, you can save the cursor position before processing, then restore it after the value updates. Here's how to implement this:

Update the Template:
Add a template reference variable to your textarea to access the DOM element directly:

<textarea 
  class="form-control alt inputBox1" 
  [readonly]="inventory.disableFlag==true" 
  required 
  isMaxLengthReached="2000" 
  name="inventoryOverrideDescription{{i}}" 
  id="inventoryOverrideDescription" 
  #inventoryOverrideDescription="ngModel" 
  #txtArea  <!-- Add this reference -->
  placeholder="" 
  [(ngModel)]="inventory.overrideDescription" 
  [disabled]="inventory.disableFlag==true" 
  (ngModelChange)="onChangeDesc(i, txtArea); commonUtilService.onValueChange(i,inventory)">
</textarea>

Update the Component Method:
Modify onChangeDesc to save and restore the cursor position:

onChangeDesc(index: number, txtArea: HTMLTextAreaElement): void {
  // Save the current cursor position before any processing
  const cursorPosition = txtArea.selectionStart;

  // Your existing logic here (e.g., trimming, validation, formatting)
  const currentValue = this.inventories[index].overrideDescription;
  const processedValue = currentValue.trim(); // Example transformation

  // Only update the value if it actually changed to avoid unnecessary re-renders
  if (processedValue !== currentValue) {
    this.inventories[index].overrideDescription = processedValue;

    // Restore cursor position after Angular finishes updating the DOM
    setTimeout(() => {
      txtArea.selectionStart = cursorPosition;
      txtArea.selectionEnd = cursorPosition;
    }, 0);
  }
}

The setTimeout ensures we wait until Angular has finished refreshing the textarea's value before resetting the cursor.

3. Check for Unintended Re-renders

• Verify that inventory.disableFlag isn't toggling unexpectedly during input—if readonly or disabled change dynamically, it can cause the textarea to re-render and reset the cursor.
• Look at the isMaxLengthReached custom attribute/directive—if it's modifying the textarea's value or triggering change detection behind the scenes, that could also be causing cursor jumps.

4. Switch to Reactive Forms (Optional)

If you're open to refactoring, Angular's Reactive Forms give you more control over input handling without the cursor quirks that sometimes come with ngModel. You can use valueChanges with distinctUntilChanged to avoid unnecessary updates, and handle transformations in a more controlled, predictable way.

内容的提问来源于stack exchange，提问作者Sourabh Jaiswal