div contenteditable属性下限制性输入，以及自定义光标位置

2024-01-14 07:12:34

如何掌控 ContentEditable：限制输入和自定义光标位置

引言

在创建动态和交互式 web 应用程序时，了解如何利用 contenteditable 属性至关重要。它使你可以将任何 div 变成可编辑区域，从而为用户提供丰富的文本编辑体验。然而，有时你可能需要对用户输入进行限制或控制光标位置。本文将深入探讨如何在 contenteditable 中实现这些特性。

限制性输入：驯服不羁的键盘

当contenteditable为true时，用户拥有自由书写的王国。但是，在某些情况下，你可能希望限制他们的键盘特权，只允许他们输入特定的字符类型。例如，你可能需要创建一个只能输入数字的计算器，或一个只允许输入字母和数字的搜索栏。

使用正则表达式，你可以轻松地实现这种输入限制。正则表达式是一种强大的文本匹配工具，允许你定义允许的字符范围。然后，你可以使用 JavaScript 代码过滤掉不符合该范围的字符。

自定义光标位置：指挥文字游标

contenteditable 通常会自动控制光标位置，但有时候你可能需要亲自动手。例如，你可能希望将光标移动到文本的开头或结尾，或者将其放置在特定单词之后。

通过设置 selectionStart 和 selectionEnd 属性，你可以轻松地控制光标位置。这些属性指定光标的开始和结束位置。使用 JavaScript 代码，你可以直接更新这些属性，从而将光标移动到你想要的位置。

代码示例

限制数字输入：

function restrictInput(e) {
  const regex = /[^0-9]/g;
  const value = e.target.value;
  const newValue = value.replace(regex, '');
  e.target.value = newValue;
}

document.querySelector('div[contenteditable]').addEventListener('input', restrictInput);

设置光标位置：

function setCursorPosition(element, position) {
  const range = document.createRange();
  range.setStart(element, position);
  range.collapse(true);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

const div = document.querySelector('div[contenteditable]');
setCursorPosition(div, 5);