码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2017-09-19 03:30:43      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:绑定   选择   部分   手机   刷新   clear   log   turn   href   

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

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

但是单纯的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标签的标签,随便绑定个点击事件就可以,哪怕方法里面什么都不写。

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

标签:绑定   选择   部分   手机   刷新   clear   log   turn   href   

原文地址:http://www.cnblogs.com/wangmaoling/p/7546101.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!