移动端 input 调用手机键盘搜索功能

最新推荐文章于 2023-11-02 15:07:24 发布
原创 最新推荐文章于 2023-11-02 15:07:24 发布 · 3.6k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何在移动端利用HTML的input元素结合CSS3属性，实现调用手机键盘的搜索功能，包括设置输入框提示文本(input-placeholder)和清除按钮(search-cancel-button)的控制。

html

<input type="search" class="input">

js

let keyword = document.getElementsByName('input')
最低0.47元/天 解锁文章
移动端输入密码时调用英文软键盘
丁大聪明的博客
12-04 3368
&amp;amp;lt;input type=&amp;quot;password&amp;quot;&amp;amp;gt; 对, 你没有看错, input-type的值设置为password即可. 亲测有效, 如果无效, 刷新一下设备浏览器即可. Android和苹果都支持, 完美~ 这篇内容太少, 不过瘾. 再来个只有Android支持的吧! 这个正则我很喜欢, 字母数字特殊字符~ &amp;amp;lt;input type=&amp;quot;te
移动页面input手机键盘中的“搜索”按键
极客神殿
04-27 4104
满足以下几点机即可： input type=“search” 放到form标签中 使用action属性 <form action="." > <input type='search' /> </form> 注意： 如果只使用input type="search"，而不放到form标签中，则显示“换行”； 如果放到form中，但是使用type=“text”，...
移动端做搜索input
CN_wangsanhua的博客
01-05 326
<input class="foodName" v-model="searchval" type="search" @input="onInput" placeholder="输入实物名称" confirm-type="search" @confirm="doSearch" /> 使用confirm-type=“search” @confirm="doSearch"会自动将设备的软键盘的回车改为搜索并执行回车键 ...
移动端 - 搜索组件(search-input篇)
hmxs_hmbb的博客
01-15 2587
搜索组件(search-input篇)
移动端input搜索的实现
ddyy265201503的博客
03-12 669
html代码如下： <form action="javascript:return true;"> <input type="search" class="search_input" placeholder="搜索" onblur="$template('datalist').clear().append();$template('totalDesc').cle...
vue实现调用手机软键盘搜索按钮进行搜索
weixin_44141261的博客
11-01 2254
vue实现调用手机软键盘搜索按钮 需求是页面无搜索按钮，需要调用手机软键盘上的搜索按钮实现搜索功能，非实时搜索 <form action="" @submit.prevent="search"> <input type="search" :placeholder="type_name ? type_name : '搜索想要的宝贝'" v-model="sea...
jQuery手机移动端点击弹出数字键盘输入代码.zip
09-21
jQuery作为一款广泛使用的JavaScript库，提供了丰富的功能来优化网页交互，其中包括在手机移动端实现点击弹出数字键盘输入的功能。本篇文章将深入探讨这一话题，帮助开发者理解并掌握相关技术。 首先，我们需要了解...
vue实现移动端H5数字键盘组件使用详解
10-14
在Vue.js中实现移动端H5数字键盘组件是一个常见的需求，特别是在开发支付或输入数字的场景中。本篇文章将深入解析如何构建这样一个自定义组件，并提供详细的代码示例，以帮助开发者理解和实现自己的数字键盘组件。 ...
vue 实现移动端键盘搜索事件监听
10-16
本文将详细介绍如何使用Vue监听移动端的键盘事件，并实现搜索功能。 首先，我们需要了解HTML中输入框的事件处理机制。输入框可以响应的键盘事件有三种：KeyDown、KeyUp和KeyPress。KeyDown和KeyUp事件分别在按键被...
实现input移动端自动获取焦点以及数字键盘搜索功能
Lc_style的博客
03-21 4139
最近项目中需要做一个搜索功能，其中就有自动获取焦点以及数字键盘快捷搜索，下面就跟大家分享一下我的实现方法：首先跳转到搜索页面input自动获取焦点，按常规写法就是加个autofocus或者页面加载完成后立即给input加个focus()方法，但是这样进入页面的时候焦点会自动消失，这就需要加个定时器让他延迟一点获取焦点就OK了，代码如下：html页面：&lt;input #searchbar typ...
移动端input弹出带有搜索按钮的键盘与获取点击搜索按钮触发的事件
璃月之天涯的博客
04-27 3919
1、如何在用户点击input时弹出带有搜索按钮的键盘，其实很简单，加上type="search"即可。 <inputid="keyword"placeholder="输入关键字搜索"type="search"/> 2、然后获取搜索按钮的点击事件： $("#keyword").on('keypress',function(e){ ...
input在移动端软键盘显示搜索按键的注意要点
HOMEXS的博客
06-01 560
input在移动端软键盘显示搜索按键的注意要点 1.input需要被包裹在form表单中 2.input的type类型为search 3.点击按钮的触发事件为@keydown.enter="相应函数" 4.form表单的action为action="javascript:return true;防止页面跳转 ...
input标签变为搜索框在移动端中的兼容
weixin_50096821的博客
03-20 1292
input标签的基本写法为： <input type="text">   在移动端中，我们会发现，回车键只是普通的回车键标识。 为了让回车键变为搜索标志，我们可以在input标签中加入type="search"的属性，即： <input type="search" />   然而在ios系统中，回车键仍然是普通的回车键标识，为了让ios系统也变成搜索标志，我们需要将input标签用form包裹起来，即： <form action> <input type
input实现在移动端软键盘中显示“搜索”案件的注意事项
前端菜菜DayDayUp的博客
06-01 483
1.input需要被包裹在from表单中； 2.input的type类型为search 3.点击按钮的触发事件为 @keydown.enter = ""
使用.NET Compact Framework开发Windows Mobile程序，不能触发OnKeyPress/OnKeyDown的原因及解决办法
在路上
12-25 1341
在.Net CF WinForm应用中，制作OwnerDraw控件，控件类从Control继承。为了捕获键盘按键消息，重载了OnKeyPress方法：    protected override void OnKeyPress(KeyPressEventArgs e)    {    }但是运行发现，该方法并未被触发，尝试其他方法重载，OnKeyDown/OnKeyUp，都一样无效。
h5页面input输入框手机键盘没有“搜索”按钮；隐藏自带的清除、搜索图标；点搜索后键盘无法自动收回。
山有木兮木有枝 心悦君兮君不知
11-02 1465
input输入框在H5移动端页面的问题
Android input输入框 移动页面input手机键盘中的“搜索”按键
weixin_30709929的博客
04-26 428
动页面input手机键盘中的“搜索”按键满足以下几点机即可： input type="search" 放到form标签中 使用action属性 <form action="." > <input type='search' /> </form> 注意：如果只使用input type="search"，而不放到...
移动端 input 输入框实现自带键盘“搜索“功能并修改X
weixin_30826761的博客
03-31 1332
主要利用html5的，input[type=search]属性来实现，此时input和type=text外观和功能没啥区别； html代码入下: <form action="" id="myform"> <input type="search" id="input" value="" placeholder="快速搜索" results="5" /> </...
input-show插件解决移动端键盘遮挡输入框问题
input-show 是一个专为解决移动端网页开发中常见问题而设计的 JavaScript 插件，其核心功能是防止移动设备软键盘弹出时遮挡页面底部输入框（如文本字段）的问题。在现代移动浏览器中，当用户点击页面中的 `<input>` ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值