React <input>：在回车时取消软键盘
React <input>：在回车时取消软键盘
提问于 2021-04-30 11:48:21
我正在写一个将在移动设备上使用的React应用程序。
其中一个页面包含用户用键盘输入的<input>文本。在字段中输入文本会立即生效，因此不需要在之后按下任何按钮。我想让软键盘的“回车”键简单地取消键盘，而不采取任何行动。这有可能吗？这听起来很简单，但我却不知道该怎么做。
无论如何，我尝试添加了enterKeyHint="done"属性(如here所述)，但是除了将enter标题从'done‘更改为'v’之外，它并没有忽略键盘。
有什么想法吗？提前感谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-30 12:04:48
听起来这只是一个从元素本身触发blur()的问题。您可以从事件处理程序或使用useRef触发blur()。
如果不想让输入向上冒泡事件，或者如果输入位于表单内部，请确保设置为e.stopPropagation()或e.preventDefault()
export default function App() {
const onEnter = (e) => {
if (e.key === "Enter") {
e.target.blur();
}
};
return (
<div className="App">
<input onKeyUp={onEnter} />
</div>
);
}CodeSandbox：https://codesandbox.io/s/relaxed-antonelli-j6c5d?file=/src/App.js
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67327946
复制相关文章
相似问题
腾讯云开发者
