移动端呼出键盘换行改为搜索

最新推荐文章于 2025-01-07 15:04:20 发布

小白路过

最新推荐文章于 2025-01-07 15:04:20 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/Bekind2010/article/details/90898903

JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在移动端将输入框的Enter键替换为搜索按钮，通过调整HTML结构与使用search类型，配合Vue阻止默认提交行为，实现更符合用户习惯的搜索体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在移动端有的时候设计稿不给出设计按钮，是需要回车搜索的，这时候希望将键盘上的enter换成搜索

默认<input type="text"/>对应的是换行

第一步：在input外面包一层form结构<form><input type="text"/></form>，此时对应的按钮变成前往

第二步：为form添加action，input改为search类型。<form action=""><input type="search"/></form>，此时对应的按钮变为搜索。此时虽然变成搜索，但是默认表单提交是由重定向的，因此还需要对默认提交事件做修改，当然，如果应用场景刚好跟默认提交契合，则不需要第三步了

第三步：以Vue为例，去除默认提交事件。<form action="" submit.prevent=""><input type="search"/></form>