妙用API，让输入框动起来：点击按钮添加内容、替换选中文本

2024-01-17 02:05:27

技术指南

在软件开发中，我们经常会遇到需要在输入框中进行操作的情况，例如在聊天输入框中添加表情包、在文本编辑器中替换选中的内容等。为了实现这些操作，我们可以利用JavaScript API。

1. 获取输入框光标位置

首先，我们需要获取输入框光标的位置。可以使用以下代码来实现：

function getCursorPosition(input) {
  if (input.selectionStart) {
    return input.selectionStart;
  } else if (document.selection) {
    input.focus();
    var sel = document.selection.createRange();
    sel.moveStart("character", -input.value.length);
    return sel.text.length;
  }
}

这个函数返回输入框光标的位置，如果光标位于输入框的开头，则返回0，如果光标位于输入框的结尾，则返回输入框的长度。

2. 在输入框光标位置添加内容

接下来，我们可以使用insertText()方法在输入框光标位置添加内容。例如，以下代码将"Hello, world!"添加到输入框光标位置：

function insertTextAtCursor(input, text) {
  var startPos = getCursorPosition(input);
  var endPos = startPos + text.length;
  input.value = input.value.substring(0, startPos) + text + input.value.substring(endPos);
}

3. 替换输入框中选中的内容

如果需要替换输入框中选中的内容，可以使用replaceSelectedText()方法。例如，以下代码将选中的内容替换为"Hello, world!":

function replaceSelectedText(input, text) {
  var startPos = input.selectionStart;
  var endPos = input.selectionEnd;
  input.value = input.value.substring(0, startPos) + text + input.value.substring(endPos);
}