移动端 input 获取焦点后弹出带enter(类似于搜索,确定,前往)键盘,以及隐藏系统键盘

一:调出系统带回车键的键盘

  在项目中经常有输入框,当输入完成后点击确定执行相应的动作。但是有些设计没有确定或者搜索按钮,这就需要调用系统键盘,点击系统键盘的确定后执行相应动作。

但是单纯的input是无法实现的,要想调出带回车的键盘必须把input放在form表单里面才可以,并且得加上action(一定要加),下面是个简单的例子。

<form action class="search" onsubmit="return false;">
  <i class="fa fa-lg fa-search"></i>
  <input type="text" class="search-input" placeholder="搜索">
  <i class="fa fa-lg fa-times-circle clear-search"></i>
</form>

这里为了避免form提交带来的页面刷新加了个onsubmit="return false;"。

二:取消后隐藏系统键盘

  在PC上想取消光标,可以直接点击页面的其他任何部分,但是在手机上点击其他无绑定事件的部分是没法取消光标的。这里提供三个方法来

隐藏键盘,在项目上选择其中最简单的一个就可以。

  1. 最简单的的一个,直接 <a href="javascript:" class="search-close">取消</a>,点一下就可以了。

  2. 用js或者jq直接让输入框失去焦点就可以,这里需要绑定主动失焦事件了。

  3. 设置个非a标签的标签,随便绑定个点击事件就可以,哪怕方法里面什么都不写。

时间: 2024-10-11 14:43:37

移动端 input 获取焦点后弹出带enter(类似于搜索,确定,前往)键盘,以及隐藏系统键盘的相关文章

关于android中EditText自动获取焦点并弹出键盘的相关设置

在android开发中,关于EditText自动获取焦点弹出键盘,我们可能又是会有让键盘自动弹出的需求,有时可能又会有不想让键盘自动弹出的需求,下面是我所总结的两种方法: 需求:EditText自动获取焦点并弹出键盘,代码: EditText.setFocusable(true); EditText.setFocusableInTouchMode(true); EditText.requestFocus(); 需求:EditText不会自动获取焦点并且不会弹出键盘,代码:  将其父控件设置: P

Visual Studio 打开解决方案后 弹出框显示 &quot;正在打开文件...&quot; 迟迟没反应 的解决方法

Visual Studio 打开解决方案后 弹出框显示 "正在打开文件...",任务管理器的devenv进程又很正常,不会显示"未响应". 而IDE的左下角有个 "正在等待分析完成..." 提示. 刚开始,我以为是VS插件问题,因为我刚安装了一个插件后,重启VS,打开解决方案就出现这个问题了,所以我以为是VS插件问题. 后来我把VS插件通通卸载了,把/ResetAddin /ResetSkipPkgs /ResetSettings 之类的deve

Android点击列表后弹出输入框,所点击项自动滚动到输入框上方(类似微信的评论)

Android点击列表后弹出输入框,所点击项自动滚动到输入框上方 使用微信的朋友圈会发现,点击某一条评论后输入框会弹出来,然后所点击的那一项会自动地滚动到输入框上方的位置,这样如果开始所点击的评论在屏幕很下方的话,就不会被输入框遮住,虽然微信这一点在我的MX2频繁点几次后滚动的位置就完全错误了,但据说在有些机型上效果还不错,还有其他地方可能会有类似的需求,比如登录时软键盘可能会把登录按钮遮住. 要实现这个功能需要注意的地方主要有两点: 什么时候进行滚动操作,以及有可能还需要在输入框消失时回滚回去

QTP录制后弹出框一个或多个ActiveX控件无法显示的解决方法

制一段脚本代码,在专家视图窗口中编辑录制的脚本代码时,会碰到弹出一个对话窗口,提示为"当前安全设置禁止运行该页中的ActiveX 控件,因此,该页可能无法正常显示"类似的东西,而在人工操作时却没有这样的现象.(如图) 问题主要出在于QTP设置本身,之所以在编辑录制好的脚本时,QTP出现关于Active的对话提示窗口,问题在于QTP的设置,要消除该提示窗口.应对QTP作如下设置:toos–options–Active Screen–Advanced–点选Load ActiveX cont

启动Jmeter4.0 后弹出警告: WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at root 0 x80000002. Windows RegCreateKeyEx(...) returned error code 5.

启动Jmeter4.0 后弹出命令窗口提示信息: WARNING: Could not open/create prefs root node Software\JavaSoft\Prefs at root 0 x80000002. Windows RegCreateKeyEx(...) returned error code 5. 原因: 用管理员账户打开jmeter.bat不报此问题,用非管理员账户打开即报此问题. 解决方法: win+R输入regedit回车,打开注册表编辑器. 找到HKE

移动端input获取焦点弹出输入框时影响fixed布局的问题

最近在做移动端项目的时候遇到的一个问题,在点击input获取焦点弹出输入框进行输入后,再次点击input输入框时,意外的事情发生了, 页面突然跳转到确定按钮跳转的页面了,刚开始以为是点击穿透导致的,朝着这个方向一直没有等到解决... 经过反复研究,发现第二次点击input 时,上面有一个隐形的按钮,这是怎么回事,确定按钮怎么就跑到上面去了呢,原来是由于最外层 使用了fixed布局,而第一次点击input获取焦点时,移动端默认弹出的输入框会将fixed布局的元素顶上去. 解决办法: 1.如果使用的

移动端二维码弹出框,自适应屏幕尺寸

qrcode box,一个小小的二维码工具,通过调用它,可以在页面中间弹出一个二维码窗口,主要是面向移动设备的,对于PC端浏览器而言,百度分享和JiaThis已经做的很好了. qrcode box有啥特点呢? 它能够自动适应屏幕,并且不受移动设备横屏.竖屏切换的干扰. 同时,无论是横屏的pad设备,还是竖屏的phone设备,qrcode box均有良好表现. 但是,qrcode box并不是完全响应式的,它的尺寸不会跟随屏幕可视区尺寸变化而变化,因为这貌似没什么用(至少对于移动设备而言用处不大)

JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> <meta content="

EditText 默认不获取焦点,弹出软键盘布局变形解决方案

关于弹出软键盘布局变形解决方案: 在androidMainfest.xml文件中在此Activity中写入 android:windowSoftInputMode="adjustPan" 在实际开发中,有的页面用到Edittext控件,这时候进入该页面可能会自动弹出输入法 这么显示不太友好,所以需要设置一下让Edittext默认不自动获取焦点.在网上查资料解决办法如下: 在EditText的父级控件中找一个,设置成 android:focusable="true"