腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >React <input>：在回车时取消软键盘

问React <input>：在回车时取消软键盘
EN

Stack Overflow用户

提问于 2021-04-30 03:48:21

回答 1查看 196关注 0票数 0

我正在写一个将在移动设备上使用的React应用程序。

其中一个页面包含用户用键盘输入的<input>文本。在字段中输入文本会立即生效，因此不需要在之后按下任何按钮。我想让软键盘的“回车”键简单地取消键盘，而不采取任何行动。这有可能吗？这听起来很简单，但我却不知道该怎么做。

无论如何，我尝试添加了enterKeyHint="done"属性(如here所述)，但是除了将enter标题从'done‘更改为'v’之外，它并没有忽略键盘。

有什么想法吗？提前感谢！

html

reactjs

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-04-30 04: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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67327946

复制

Input被软键盘遮住

jquery javascript

在业务开发过程中，移动端输入框被软键盘遮住的情况还是很容易出现的。在不同手机不同系统都有可能出现。

wade

2020/04/24

1K0

input在输入后回车会刷新当前页面解决

input

1、添加一个隐形的文本框 <input type="text" style="display:none"/> 2、form表单设置添加 onsubmit="return false;" <form class="schoolfellow-form" action="" onsubmit="return false;"> </form> //监听回车事件 $(document).ready(function () { document.onkeydown = function (event) {

小语雀网

2022/05/06

1.1K0

HTML防止input回车提交表单

html

奋飛

2019/08/15

3.9K0

form表单中只有一个input时，回车触发页面刷新问题

form iview keydown native submit

当 form 中只有一个 input 时回车时，会自动提交表单，这是浏览器的默认行为。

小僧

2020/09/14

1.6K0

在input中回车后页面提交导致出现HTTP 错误 405.0 - Method Not Allowed

http

前些时间在做一个搜索功能时发现一个比较有意思的现象，场景是这样的：在一个模态窗口中是一个订单列表，页面的顶部有若干个状态筛选框和一个搜索关键字输入框，当焦点在关键字输入框时按回车，本来是对input的keyup事件做了监听，当发现是按了回车键时便自动提交搜索请求的，但输入关键字后按回车时页面竟然跳转了，并且出现“HTTP 错误 405.0 - Method Not Allowed无法显示您正在查找的页面，因为使用了无效方法(HTTP 谓词)”的错误，非常纳闷。

风柏杨4711

2021/03/15

1.9K0

input输入中文时，拼音触发input事件

语音识别

在上一篇文章中写到了函数防抖，在使用函数防抖来进行搜索框优化的时候会遇到一个问题，就是监听文本输入框的input事件，在拼写汉字（输入法）但汉字并未实际填充到文本框中时会触发input事件，会出现下图的效果

OECOM

2020/07/01

8.3K1

Input 在输入点击时去掉自带的颜色边框

html input 翻译

input标签在输入点击时会自带一个颜色边框，那怎么去掉呢？只需要一个outline属性就可以了

Alone88

2019/10/22

2.5K0

输入框在输入中文时回车误触发输入的回车事件

event return shift 前端事件

这个问题出现在：chatx.me的输入框最近反应的人比较多，然后还是问了下前前端同事，解决了。

SingYi

2023/08/23

3120

React报错之react component changing uncontrolled input

https 网络安全编程算法 react

原文链接：https://bobbyhadz.com/blog/react-component-changing-uncontrolled-input[1]

chuckQu

2022/08/19

3750

React报错之react component changing uncontrolled input

input框取消光标颜色手机端不生效

腾讯云测试服务

蓓蕾心晴

2018/04/12

1.4K0

React技巧之设置input值

编程算法 https jquery 网络安全 react

原文链接：https://bobbyhadz.com/blog/react-set-input-value-on-button-click[1]

chuckQu

2022/08/19

2K0

鼠标聚焦到input输入框时，按回车键刷新页面原因及解决方法

php

遇到这个问题是在网页input输入框按下回车键后被返回到登录页，感觉很奇怪，于是跟踪了代码，发现进入了拦截器流程但获取登录token失败而“踢到”登录页。

johnhuster的分享

2022/03/28

8320

移除HTML5 input在type="number"时的上下小箭头

chrome firefox input max min

将type="number"改为type="tel"，同样是数字键盘，但是没有箭头，但是这样会有一个问题无法设置input的 max和min 值了，当还有step，当然如果你想用这种方案的话可以利用input的 pattern 属性来正则加验证。

李维亮

2021/07/09

1.7K0

vue使用element-ui的el-input监听不了回车事件

dom el element input ui

原因今天在使用element-ui时，el-input组件监听不了回车事件，如下代码没有想要的效果： <el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听，在element-ui里有很多因为自身封装了几层标签导致事件和样式无法按想要的效果呈现，遇到后可以在网页中查看d

mcq

2018/06/20

1.3K0

vue使用element-ui的el-input监听不了回车事件解决

javascript

vue使用element-ui的el-input监听不了回车事件，原因应该是element-ui自身封装了一层input标签之后，把原来的事件隐藏了，所以如下代码运行是无响应的： <el-input v-model="form.loginName" placeholder="账号" @keyup.enter="doLogin"></el-input> 解决方法需要在事件后面加上.native <el-input v-model="form.loginName" placeholder="账号" @keyup

hbbliyong

2018/04/17

8710

Android弹软键盘时之ListView的变化控制

android

前几天有个人问我，说在最底下有个输入框，弹出键盘时整个界面都一起跟着移动，上面的标题栏都移到上面看不到了，界面非常难看。其实这种问题一般存在于这样的界面布局中那就是，上面是标题栏，中间是Listview,下面是输入框。而经常遇到的问题就是当点击输入框时，键盘弹出，标题栏不见了。我们正确的现实效果应该是像微信，QQ的聊天框一样，当点击输入框时，保持标题栏，挤压ListView。解决办法如下第一步在AndroidMnanifest.xml中相应的Activity加上android:windowSoftIn

非著名程序员

2018/02/02

9820

React报错之`value` prop on `input` should not be null

https 网络安全 react api 编程算法

原文链接：https://bobbyhadz.com/blog/react-value-prop-on-input-should-not-be-null[1]

chuckQu

2022/08/19

7090

React报错之`value` prop on `input` should not be null

提交表单时input字段非空验证

return 表单

需求，当提交表单的时候，如果要验证的字段为空，则弹出提示框提示请完善表单信息，并且 return;不执行下一步。

王小婷

2019/08/07

3K0

React技巧之表单提交获取input值

https http 网络安全编程算法 react

原文链接：https://bobbyhadz.com/blog/react-get-form-input-value-on-submit[1]

chuckQu

2022/08/19

1.6K0

jQueryWEUI解决input框调起的软键盘和选择器重叠的问题

input

//点击input框 $("#name,#phone,#recommend").click(function () { $("#gener,#gift_id").select("close") }) //点击弹出picker $("#gener,#gift_id").click(function () { document.activeElement.blur(); })

明知山

2020/09/03

6570

相似问题

正在取消回车时提交

按回车时立即取消搜索

使用React回车时提交

React - Input Value在提交时清除

按回车键时截击取消所有任务

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

问React <input>：在回车时取消软键盘
EN