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

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

但是单纯的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;"。

下图右图是按照上面写法出现的效果

                

如果需要调出“搜索”按钮只需要将type设置为search

详细的业务处理代码是这样的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1" />

    <style>

    </style>

</head>

<body>

    <form id="test_form" action class="search" onsubmit="return checkForm()">

    　　<i class="fa fa-lg fa-search"></i>

    　　<input  id="pwd" type="search" class="search-input" placeholder="搜索">

    　　<i class="fa fa-lg fa-times-circle clear-search"></i>

    </form>

</body>

<script>

var form = document.getElementById('test_form');

function checkForm(){

    var pwd= document.getElementById('pwd');

    pwd.value= pwd.value;

    alert(pwd.value)

    // 这里做逻辑处理

    return false;

}

</script>

</html> 

或者

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

</head>

<body>

    <form id="myform" action="" onsubmit="return false;">

        <input id="myinput" type="search">

    </form>

</body>

<script>

//这两种都能用, 一个是在form上加id 一个是在input元素加id

//对于苹果手机添加一个form元素是必要的,否则只能实现功能但是键盘的文字不能变成搜索字样

    $('#myinput').on('search', function () {

        //coding

        alert();

    });

</script>

</html>

二：取消后隐藏系统键盘

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

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

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

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

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

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

  1. uni-app 在input获取焦点（弹出软键盘后收起软键盘），页面不下滑，留下下方空白

    加入收起软键盘时让页面回正 uni.pageScrollTo({ scrollTop: 0, duration: 0 });

  2. 移动端和PC端页面常用的弹出层

    我们在页面的时候,很多时候用到了弹出层,消息提醒,确认框等等,统一样式的弹出框可以使页面更加优美.在此,我整理一下我们项目的移动端和PC端页面常用的弹出层. 一.移动端 我们需在页面引入弹出框的样式和 ...

  3. EditText: EditText自动获取焦点并弹出键盘&EditText不自动获取焦点并且不会弹出键盘

    1.EditText不自动获取焦点并且不会弹出键盘 找到EditText的父控件,设置其父控件为: Parent.setFocusable(true); Parent.setFocusableInTo ...

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

    Visual Studio 打开解决方案后 弹出框显示 "正在打开文件...",任务管理器的devenv进程又很正常,不会显示"未响应". 而IDE的左下角有个 ...

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

    在android开发中,关于EditText自动获取焦点弹出键盘,我们可能又是会有让键盘自动弹出的需求,有时可能又会有不想让键盘自动弹出的需求,下面是我所总结的两种方法: 需求:EditText自动获 ...

  6. 启动Jmeter4.0 后弹出命令窗口提示信息是什么意思？

    启动Jmeter4.0 后弹出命令窗口提示信息: =========================================================================== ...

  7. 启动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 r ...

  8. JS函数 编程练习 使用javascript代码写出一个函数：实现传入两个整数后弹出较大的整数。

    编程练习 使用javascript代码写出一个函数:实现传入两个整数后弹出较大的整数. 任务 第一步: 编写代码完成一个函数的定义吧. 第二步: 我们来补充函数体中的控制语句,完成函数功能吧. 提示: ...

  9. ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

    前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹. 解决办法: ...

随机推荐

  1. DBS-Oracle：表的连接查询

    ylbtech-DBS-Oracle:表的连接查询 链接查询是指基于两个或两个以上表或试图的查询.在实际应用中,查询单个表可能无法满足应用程序的实际需求(例如显示雇员的部门名称以及雇员名),在这种情况 ...

  2. springboot的常见配置

    1.Springboot热部署 热部署的意思就是当任何类发生改变时,通过JVM类加载的方式加载到虚拟机上,这样就不需要我们重启Application类了 做法: 1)添加一个依赖到pom.xml上: ...

  3. [makefile]如何设置不同目录的代码(.c)，生成到指定目录下(./debug/.o))

    部分代码跟makefile不在同一目录,有没有好的方法来设置依赖关系,我找到三种方法,但感觉都不完美,下面我会把他列出来并加以说明,不知有没有更好的方法,makefile本身也不是很熟,请大家指教: ...

  4. Spark RDD概念学习系列之Pair RDD的分区控制

    不多说,直接上干货! Pair RDD的分区控制 Pair RDD的分区控制 (1) Spark 中所有的键值对RDD 都可以进行分区控制---自定义分区 (2)自定义分区的好处:  1) 避免数据倾 ...

  5. Kylin基础教程（二）

    近期先把Kylin教程整理完毕,后续根据大家需求(可能会发起投票),整理其他技术栈知识教程. OK,那么接上一篇文章,感性认知了Kylin之后,我们先来看一下如何部署Kylin吧. 序号也依然沿用上一 ...

  6. IOC-Castle Windsor映射

    Castle最早在2003年诞生于Apache Avalon项目,目的是为了创建一个IOC(控制反转)框架.发展到现在已经有四个组件了,分别是ActiveRecord(ORM组件),Windsor(I ...

  7. ASP.NET中各种缓存技术的特点及使用场景

    对于一些不经常改变却经常被request的数据,我们喜欢将它们缓存在内存.这样用户请求时先到缓存中去取,如果缓存中没有,再去数据库拿,提高响应速度.缓存一般实现在BLL,这样可以与DAL分离,更换数据 ...

  8. Codeforces Round #493 (Div. 2) C. Convert to Ones 乱搞_构造_好题

    题意: 给你一个长度为 nnn 的 010101串 ,你有两种操作: 1.将一个子串翻转,花费 XXX 2.将一个子串中的0变成1,1变成0,花费 YYY 求你将这个01串变成全是1的串的最少花费. ...

  9. node——服务器根据不同请求作出不同响应+响应html文件等文件

    在浏览器中,不同的请求应该作出不同的响应 我们可以从请求req中的url获得请求的内容 然后我们就可以通过判断请求的url来做响应 代码如下: //根据用户的不同请求,服务器做出不同的响应 // // ...

  10. sed将上下两行并列

    #cat log5 mmmm 1234 nnnn 2344 #sed -n '{N;s/\n/\t/p}' log5 mmmm 1234 nnnn 2344