menu
more_vert
[Angular HTML] Implementing The Input Mask Cursor Navigation Functionality -- setSelectionRange

作者:dayu

  @HostListener(keydown, [$event, $event.keyCode])
  onKeyDown($event: KeyboardEvent, keyCode) {

    if(keyCode !== TAB) {
      $event.preventDefault();
    }

    // get value for the key
    const val = String.fromCharCode(keyCode);
    // get position
    const cursorPos = this.input.selectionStart;

    switch(keyCode) {
      case LEFT_ARROW:
        this.handleLeftArrow(cursorPos);
        return;
      case RIGHT_ARROW:
        this.handleRightArrow(cursorPos);
        return;
    }

    overWriteCharAtPosition(this.input, val, cursorPos);
    this.handleRightArrow(cursorPos);
  }

  handleRightArrow(cursorPos) {
    const valueBeforeCursor = this.input.value.slice(cursorPos + 1);
    const nextPos = findIndex(valueBeforeCursor, (char) => !includes(SPECIAL_CHARACTERS, char));
    if(nextPos > -1) {
      const newNextPos = cursorPos + nextPos + 1;
      this.input.setSelectionRange(newNextPos, newNextPos);
    }
  }

  handleLeftArrow(cursorPos) {
    const valueAfterCursor = this.input.value.slice(0, cursorPos);
    const previousPos = findLastIndex(valueAfterCursor, (char) => !includes(SPECIAL_CHARACTERS, char));
    if(previousPos > -1) {
      this.input.setSelectionRange(previousPos, previousPos);
    }
  }

We can use ‘setSelectionRange(start, end)‘ to set cursor postion, in which start postion = end position.

[Angular HTML] Implementing The Input Mask Cursor Navigation Functionality -- setSelectionRange

原文地址:http://www.cnblogs.com/Answer1215/p/7226850.html



Processed Time:0.23756194114685

_REQUEST:
Array
(
    [0] => read
    [1] => 94841
)
_SESSION:
Array
(
    [fid] => 4
)