js 删除range的最后一个字符|极客笔记

js 删除range的最后一个字符

在开发中，我们有时候需要对文本框中的内容进行操作，比如删除文本框中的最后一个字符。而在JavaScript中，我们可以使用Selection对象和Range对象来实现这个功能。本文将详细介绍如何使用JavaScript删除Range对象的最后一个字符。

1. 获取光标位置

在使用Range对象删除最后一个字符之前，我们首先需要获取文本框中光标的位置。我们可以使用Selection对象来获取光标的位置，代码如下：

function getCursorPosition(textbox) {
  var cursorPos = 0;
  if (document.selection) {
    // For IE
    textbox.focus();
    var selection = document.selection.createRange();
    selection.moveStart('character', -textbox.value.length);
    cursorPos = selection.text.length;
  } else if (textbox.selectionStart || textbox.selectionStart === 0) {
    // For modern browsers
    cursorPos = textbox.selectionStart;
  }
  return cursorPos;
}

上面的代码中，getCursorPosition函数用来获取当前光标的位置。如果是IE浏览器，我们使用document.selection.createRange()来获取Selection对象，并通过selection.text.length获取光标位置。如果是其他现代浏览器，我们使用textbox.selectionStart属性来获取光标位置。

2. 删除最后一个字符

获取光标位置后，我们就可以使用Range对象来删除文本框中的最后一个字符。代码如下：

function deleteLastCharacter(textbox) {
  var cursorPos = getCursorPosition(textbox);
  var range = document.createRange();
  range.selectNodeContents(textbox);
  range.setEnd(textbox, cursorPos);
  range.deleteContents();
}

上面的代码中，deleteLastCharacter函数用来删除文本框中的最后一个字符。首先，我们创建一个Range对象，并通过range.selectNodeContents(textbox)选中文本框中的全部内容。然后，我们使用range.setEnd(textbox, cursorPos)将最后一个字符设为光标位置。最后，我们使用range.deleteContents()方法来删除光标位置及之后的文本。

3. 示例

下面是一个示例代码，用来演示如何删除文本框中的最后一个字符：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delete Last Character</title>
</head>
<body>
<textarea id="textbox" cols="30" rows="10">Hello, world!</textarea>
<button onclick="deleteLastCharacter(document.getElementById('textbox'))">Delete Last Character</button>
<script>
function getCursorPosition(textbox) {
  var cursorPos = 0;
  if (document.selection) {
    // For IE
    textbox.focus();
    var selection = document.selection.createRange();
    selection.moveStart('character', -textbox.value.length);
    cursorPos = selection.text.length;
  } else if (textbox.selectionStart || textbox.selectionStart === 0) {
    // For modern browsers
    cursorPos = textbox.selectionStart;
  }
  return cursorPos;
}

function deleteLastCharacter(textbox) {
  var cursorPos = getCursorPosition(textbox);
  var range = document.createRange();
  range.selectNodeContents(textbox);
  range.setEnd(textbox, cursorPos);
  range.deleteContents();
}
</script>
</body>
</html>

当我们在文本框中输入任意内容后，点击按钮”Delete Last Character”时，文本框中的最后一个字符将被删除。