HTML Textarea 以及光标位置集 - HTML

简介

HTML 中的 <textarea> 元素是可以用来输入文本的区域。在输入文本的时候，有时候需要记录某个时刻光标所在的位置。这时候就可以使用一些光标位置相关的 API 去操作。

HTML Textarea 元素

HTML中的 textarea 元素可以用来创建文本输入区域。可以通过 rows 和 cols 属性来指定 textarea 的行数和列数。输入框中的内容可以直接用 value 属性来获取。

<textarea rows="4" cols="50">
  初始内容...
</textarea>

光标位置

在输入文本的时候，有时候需要记录某个时刻光标所在的位置。HTML 提供了一些 API 来获取或设置光标的位置。

selectionStart 和 selectionEnd

selectionStart 和 selectionEnd 是 <textarea> 元素特有的两个属性，它们分别表示文本框中选中文本的起始和结束位置（如果没有选中文本，则两个属性返回相同的值，表示当前光标所在位置）。可以使用这两个属性来获取或设置光标的位置。

const textarea = document.querySelector('textarea');

// 获取光标位置
const start = textarea.selectionStart;
const end = textarea.selectionEnd;

// 设置光标位置
textarea.selectionStart = 0;
textarea.selectionEnd = 0;

selectionDirection

selectionDirection 属性用来获取选中文本的方向。如果没有选中文本，该值为空。

const textarea = document.querySelector('textarea');

// 获取选中文本的方向
const direction = textarea.selectionDirection;

setSelectionRange()

setSelectionRange() 方法可以用来设置光标位置和选中文本。该方法接受三个参数：开始位置、结束位置和可选的选中方向参数。

const textarea = document.querySelector('textarea');

// 设置光标位置和选中文本
textarea.setSelectionRange(0, 5, 'forward');

总结

HTML 中的 <textarea> 元素可以用来创建文本输入区域，selectionStart、selectionEnd 和 selectionDirection 等属性以及 setSelectionRange() 方法可以用来获取或设置光标的位置和选中文本。这些 API 可以方便地进行文本操作。