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

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

但是单纯的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. php如何判断两个时间戳是一天

    $date1 = getdate(strtotime('2013-12-31')); $date11 = getdate(strtotime('2014-01-01')); $date2 = getd ...

  2. 38.Qt模型/视图结构

    1.模型/视图类 2.模型 3.视图 4.代理 1 模型/视图类 InterView框架提供了一些可以直接使用的模型类和视图类,如QStandardModel类,QDirModel类,QStringL ...

  3. BZOJ 1369 树形DP

    思路: f[i][j] 表示节点i 染成j时 子树的最小权值 (我会猜这个j很小 你打我吖~) 随便DP一发就好了 (证明我也不会) //By SiriusRen #include <cstdi ...

  4. 远程桌面连接Windows Azure中的Ubuntu虚拟机

    默认情况下,通过Windows Azure创建的ubuntu虚拟机是不能直接连接远程桌面的,只能通过SSH终端连接. 在Windows Azure Portal中创建Ubuntu虚拟机,创建完成后添加 ...

  5. vue2.x directive - 限制input只能输入正整数

    onlyNum.js import Vue from 'vue' //只对input生效 export default function (el) { var input = el; input.on ...

  6. 使用DWR实现JS调用服务端Java代码

    DWR简介 DWR全称Direct Web Remoting,是一款非常优秀的远程过程调用(Remote Procedure Call)框架,通过浏览器提供的Ajax引擎实现在前端页面的JS代码中调用 ...

  7. Unity类继承关系 图

    UnityEngine(命名空间) 其他命名空间 其他类 Object(类) 其他类(继承自Object) Component(类)(继承自Object) 其他类(继承自Component) Tran ...

  8. 全文检索lucene6.1的检索方式

    背景: 工作任务完成后,闲暇之计给自己充充电! Lucene是一个纯java全文检索工具包,采用倒排索引原理. 全文检索:指的是计算机索引程序通过扫描文章的每一个词,对每一个词建立一个索引,并指明该词 ...

  9. 路飞学城Python-Day37(practise)

    #1.自行创建测试数据 create database homework; use homework; # 年级表->老师表->课程表->班级表->学生表->成绩表-&g ...

  10. HDU 5762 Teacher Bo （ 暴力 ）

    链接:传送门 题意:给出N个点( Xi , Yi ),和点的最远位置M,询问是否有这样的四个点 (A,B,C,D)(A<B,C<D,A≠CorB≠D) ,AB的曼哈顿路径长度等于CD的曼哈 ...