Question

我编写了一个用于处理textarea元素的代码。操作以下列方式工作：

Max_ROWS和MAX_CHARACTERS_PER_ROW是为textarea宣布的。
当用户点击 Enter 时，我们检查当光标位于最后一行之前的行时是否点击了输入。
如果是，如果最后一行未到达MAX_CHARACTERS_PER_ROW，则光标后面的所有字符都会附加到最后一行的开头

代码工作正常，但是当用户单击enter然后使用 CTRL + Z （撤消）时，输入不会返回到先前的状态。< / p>

这是我设置的代码示例。代码已从我的应用程序中获取并更改以证明问题。

const MAX_ROWS = 2;
const LINE_BREAK = '\n';
const SPACE = " ";
const EMPTY_STRING = "";
const MAX_CHARACTERS_PER_LINE = 25;

var textareaManipulator = new TextareaManipulatorService();
limitLines.bind(window);

$(document).ready(function () {
  $('textarea')
    .on('keypress', function (event) {
       let isEnterPressed = event.keyCode == 13;
       if (isEnterPressed) {
          limitLines(this, event); 
       }
    });
});


function limitLines(element, event) {
  let linesBeforeNewKey = element.value.split(LINE_BREAK);
  let isReachedMaxRows = linesBeforeNewKey.length >= MAX_ROWS;

  if(isOneBeforeLastLine(element) && isEnoughSpaceOnNextLine(element)) {
    addTextToNextLineIfNeeded(element, event);
  }

  if(isReachedMaxRows) {
    event.preventDefault();
  }
}

function isOneBeforeLastLine(textarea) {
  let currentLineNumber = textareaManipulator.getCurrentTextareaLineNumber(textarea);
  return currentLineNumber == MAX_ROWS - 1;
}

function isEnoughSpaceOnNextLine(textarea) {
  let charactersAfterCursorLength = textareaManipulator.getCharactersAfterCursorLength(textarea);
  let currentLineNumber = textareaManipulator.getCurrentTextareaLineNumber(textarea);
  let nextLineLength = textareaManipulator.getTextareaLineLength(textarea, currentLineNumber + 1);
  let spaceKeyLength = 1;
  return nextLineLength + spaceKeyLength + charactersAfterCursorLength <= MAX_CHARACTERS_PER_LINE ;
}

function addTextToNextLineIfNeeded(textarea, event) {
  let charactersAfterCursor = textareaManipulator.getCharactersAfterCursor(textarea);
  if (!charactersAfterCursor) {
    return;
  }
  let currentLineNumber = textareaManipulator.getCurrentTextareaLineNumber(textarea);
  textareaManipulator.addTextToLine(textarea, charactersAfterCursor, currentLineNumber + 1);
  event.preventDefault();
}


function TextareaManipulatorService() {
    this.getCurrentTextareaLineNumber = getCurrentTextareaLineNumber;
    this.getCharactersAfterCursor = getCharactersAfterCursor;
    this.getCharactersAfterCursorLength = getCharactersAfterCursorLength;
    this.getTextareaLineText = getTextareaLineText;
    this.getTextareaLineLength = getTextareaLineLength;
    this.removeTextFromCurrentLine = removeTextFromCurrentLine;
    this.addTextToNextLine = addTextToNextLine;
    this.addTextToLine = addTextToLine;

  function getCurrentTextareaLineNumber(textarea) {
    return textarea.value.substr(0, textarea.selectionStart).split(LINE_BREAK).length;
  }

  function getCharactersAfterCursor(textarea){
    return textarea.value.substr(textarea.selectionStart).split(LINE_BREAK)[0];
  }

  function getCharactersAfterCursorLength(textarea) {
    return this.getCharactersAfterCursor(textarea).length;
  }

  function getTextareaLineText(textarea, lineNumber) {
    let text = textarea.value.split(LINE_BREAK)[lineNumber -1];
    if(!text) {
      return EMPTY_STRING;
    }
    return text;
  }

   function getTextareaLineLength(textarea, lineNumber){
    let line = textarea.value.split(LINE_BREAK)[lineNumber - 1];
    if(!line) {
      return 0;
    }
    return line.length;
  }

  function removeTextFromCurrentLine(textarea, lineNumber) {
    let lines = textarea.value.split(LINE_BREAK);
    lines[lineNumber -2] = lines[lineNumber -2 ].substr(0, textarea.selectionStart);
    textarea.value = lines.join(LINE_BREAK);
  }

  function addTextToNextLine(textarea, lineNumber, newText) {
    let lines = textarea.value.split(LINE_BREAK);
    lines[lineNumber - 1] = newText;
    textarea.value = lines.join(LINE_BREAK);
  }

  function addTextToLine(textarea, textToAdd, lineNumber) {
    let lineText = this.getTextareaLineText(textarea, lineNumber);    
    lineText = textToAdd + SPACE + lineText;
    removeTextFromCurrentLine(textarea, lineNumber);
    addTextToNextLine(textarea, lineNumber, lineText)
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>

在textarea中修改文本后修改Ctrl + Z.

0 个答案: