标签: selection-api

我正在使用selectionStartandselectionEnd来获取文本选择的起点和终点。

代码： https: //codesandbox.io/s/busy-gareth-mr04o

然而，我正在努力定义可以调用它们的事件类型。如果我使用any，代码可以正常工作，但我更想知道正确的事件。

我尝试过这些类型： Element React.SyntheticEvent<HTMLDivElement> <HTMLDivElement> 没有运气

export default function App() {
  const [startText, setStartText] = useState<number | undefined>();
  const [endText, setEndText] = useState<number | undefined>();

  const handleOnSelect = (event: any) => { <--- I CANNOT FIND THE RIGHT EVENT TYPE
    setStartText(event.target.selectionStart);
    setEndText(event.target.selectionEnd);
  };

  return (
    <Grid container direction="column" className="App">
      You can type here below:
      <TextField
        value={"This is a example, select a word from this string"}
        onSelect={(event) => handleOnSelect(event)}
      />
      <br …

我需要根据鼠标移动找到输入字段中字符的位置。

例如：如果输入字段的值为“abcde”，并且我将鼠标移动到字符“a”上，则位置将为 1，“b”将为其他字符提供 2，依此类推。

我确实找到了一些与选择开始等一起使用的示例，但它们仅在插入符放置在某个位置然后找到放置的位置时才起作用。

我正在寻找的是 - 无论鼠标何时在字符上移动，输入字段中可能/可能不会单击 - 我能够知道鼠标悬停在其上的字符的位置。

我还没有想到如何将鼠标坐标分别转换为字符位置。有没有这样的 javascript API？

非常感谢任何帮助/指示/想法。

更新

我的最终目标是当拖动发生在 contenteditable div 上时自动移动插入符号。我发现以下链接询问了类似的问题 - 但到目前为止还没有建议的解决方案。

caret auto move - /sf/ask/867845471/#53660415

我还添加了另一个示例来展示本机拖动与 jQuery 拖动的不同行为。我正在使用 jQuery Draggable，它不支持自动拖动插入符。

https://jsfiddle.net/VidushiGupta/7warczfy/

我能够通过记录 onselect 并每次存储开头和结尾来从文本区域中获取突出显示的文本。然后，当我单击按钮时，我自己构建子字符串。是否有更简单的方法来简单地查询选择？

我有点期待 html5 dom 中会有用于所有这些事情的方法，例如：

textarea.getSelectedStart() textarea.getSelectedEnd(); textArea.setSelected(开始,结束);

另外，是否有一种方法可以以编程方式取消选择文本区域中的文本？

我正在根据下面的第一个解决方案输入代码。这种方法可行，但有一个奇怪的问题：

<script language=javascript>
function replaceCLOZE(code, questionType) {
  var v = code.value;
  var s = code.selectionStart;
  var e = code.selectionEnd;
  var t = v.substr(s, e-s);
  var rep = "{:" + questionType + ":="+t+"}";
  code.value = v.substr(0,s) + rep + v.substr(e,v.length-e+1);
}

function shortAnswer(code) {
  replaceCLOZE(code, "SA");
}
function shortAnswerCaseSensitive(code) {
  replaceCLOZE(code, "SAC");
}
function multipleChoice(code) {
  replaceCLOZE(code, "MC");
}

文本区域实际上具有属性 code.selectionStart 和 code.selectionEnd。但上面的代码现在可以工作，将屏幕上突出显示的文本设置为文本区域中的第一个单词。请注意，selectionStart 仍然是正确的，但 Firefox 中实际突出显示的内容是错误的。

在 Chrome 中它工作得很好。也许这只是 Firefox …