Shift + Enter 仅适用于桌面

Question

我有一个 React 聊天应用程序，我使用文本区域作为消息输入，因为我需要多行支持。在移动设备上，这非常有效，因为当用户按 Enter 时，它会开始一个新行。用户写完消息后，有一个专用按钮可以发送消息。

但是在桌面上，我希望有所不同。我希望用户必须按 Shift + Enter 才能创建新行。如果他们只按 Enter 我希望发送消息。

我找到了这个教程，我认为我可以工作（我还没有添加它），但这意味着对于移动设备上的用户来说，他们将无法编写多行消息。

我该如何执行此操作，以便对于移动设备上的用户，按文本区域上的 Enter 将开始一个新行，但对于移动设备上的用户，它将提交表单，他们需要按住 Shift + Enter 开始新行？

Answer 1

我尝试通过触摸屏功能检测移动设备来创建此功能。这是可行的解决方案codesandbox

import "./styles.css";

export default function App() {
  const isTouchScren = () => {
    if (window.matchMedia("(pointer: coarse)").matches) {
      return true;
    }
    return false;
  };

  const onKeyPress = (event) => {
    if (
      (isTouchScren() && event.keyCode === 13 && !event.shiftKey) ||
      (event.keyCode === 13 && event.shiftKey)
    ) {
      // next line
      alert("next line");
    } else if (event.keyCode === 13 && !event.shiftKey) {
      // send text
      alert("send text");
    }
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <textarea onKeyDown={onKeyPress} rows={4} cols={50}>
        Start editing to see some magic happen!
      </textarea>
    </div>
  );
}