文本框行为 | rxi

2021 年 3 月 7 日的这份记录详细阐述了在用户界面中用于引用目的的文本输入框的“全套”标准核心功能。
核心组件分为三部分:

  • Movements:描述从一个位置移动到下一个位置的方式,如向左移动一个字符等。
  • Operations:使用移动来执行动作,如选择到等。
  • Commands:多数是执行移动的操作,但不限于此。

光标和选择

文本框的光标/选择通常由一对整数实现,第一个整数(头)是光标当前位置,第二个整数(尾)是选择的另一端,无文本选择时头和尾相同值只显示光标,有选择时两边值不同。
支持 3 种核心操作:

  • move-to:移动光标(选择的两端)。
  • select-to:只移动选择的头且不影响尾。
  • delete-to:删除光标和结果位置之间的所有内容。

单行文框和多行文框都支持单行移动:

  • left:向左移动一个字符。
  • right:向右移动一个字符。
  • next-word-end:跳过右侧空格并移动到下一个单词的末尾,当前在单词中间则移动到该单词末尾。
  • previous-word-end:跳过左侧空格并移动到上一个单词的开头,当前在单词中间则移动到该单词开头。
  • start:移动到文本的第一个字符之前。
  • end:移动到文本的最后一个字符之后。移动到文本边界外时应限制在文本范围内。

多行移动仅支持多行文本框:

  • up:移动到上一行。
  • down:移动到下一行。
  • line-start:移动到当前行的开头(如果换行则为软行开头)。
  • line-end:移动到当前行的末尾(如果换行则为软行末尾)。
  • page-up:向上移动文本框的高度。
  • page-down:向下移动文本框的高度。连续垂直移动时水平位置应接近初始水平位置,以保持视觉一致性。

基于移动的命令

通过组合上述操作和移动,可支持以下核心命令:

  • backspace:删除到 + 向左。
  • delete:删除到 + 向右。
  • delete-word-left:删除到 + 向左一个单词。
  • delete-word-right:删除到 + 向右一个单词。
  • move-left:移动到 + 向左。
  • move-right:移动到 + 向右。
  • move-up:移动到 + 向上。
  • move-down:移动到 + 向下。
  • move-word-left:移动到 + 向左一个单词。
  • move-word-right:移动到 + 向右一个单词。
  • move-line-start:移动到 + 行开头。
  • move-line-end:移动到 + 行末尾。
  • move-start:移动到 + 开头。
  • move-end:移动到 + 末尾。
  • select-left:选择到 + 向左。
  • select-right:选择到 + 向右。
  • select-up:选择到 + 向上。
  • select-down:选择到 + 向下。
  • select-word-left:选择到 + 向左一个单词。
  • select-word-right:选择到 + 向右一个单词。
  • select-line-start:选择到 + 行开头。
  • select-line-end:选择到 + 行末尾。
  • select-start:选择到 + 开头。
  • select-end:选择到 + 末尾。
    move-leftmove-right命令有特殊情况:有文本选择时,光标移动到所选文本的相应边缘且取消选择。

其他命令

除基于移动的命令外,还有其他不依赖移动的命令:

  • newline:在多行文本框中插入新行。
  • select-all:选择文本框中的所有文本。
  • cut:将当前选择复制到剪贴板并删除。
  • copy:将当前选择复制到剪贴板。
  • paste:插入剪贴板中的文本。
  • undo:撤销最多 300 毫秒无操作的最后一个操作。
  • redo:撤销之前执行的撤销命令。

文本框通常支持鼠标输入来修改选择,有 3 种模式:

  • single-click:字符粒度。
  • double-click:单词粒度。
  • triple-click:行粒度。按下鼠标时设置选择的两端为当前鼠标光标位置,拖动时头移动尾不变,按下Shift时尾不变头改变,选择位置基于上述粒度。
阅读 5
0 条评论