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

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

但是单纯的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. [C#] 隐式类型var —— 示例解析

    从 Visual C# 3.0 开始,在方法范围中声明的变量可以具有隐式类型var.隐式类型可以替代任何类型,它的具体类型由编译器根据上下文推断而出. 下面就让我来总结下隐式类型的一些特点: 1.va ...

  2. CZLayer的阴影

    CALayer有一个shadow属性 意思是阴影 shadowcolor  //颜色 shadowoffset  //偏移 shadowOpacity  //透明度 layer有一个方法    mas ...

  3. maven、spring jdbc与mysql、mybatis

    以它们之前的一个简单用例作为实例. 一个简单的能跑起来的实例.原文网址.非常好的例子. http://www.open-open.com/lib/view/open1390534380648.html ...

  4. MVC的一些常用特性，持续更新中。。。

    1. @MvcHtmlString.Create("<option value='1'>火星</option>")   //渲染Html

  5. Java基础——选择排序、冒泡排序

    1.选择排序 原理是直接从待排序数组里选择一个最小(或最大)的数字,每次都拿一个最小数字出来, 顺序放入新数组,直到全部拿完 代码演示: public class Test3 { public sta ...

  6. innobackupex: Error: --decompress requires qpress

    数据库版本:5.6.16​系统版本:cenos 6.5​​通过percona-xtranbackup恢复数据库报错(软件版本:percona-xtrabackup-2.1.9-744.rhel6.x8 ...

  7. jquery.zclip.js复制到剪切板

    参考http://www.cnblogs.com/PeunZhang/p/3324727.html 需要引用jquery.zclip $("#id").zclip({ path: ...

  8. PHP的反射API

    PHP5的类和对象并没有告诉我们类内的所有一切,而只是报告了他们的公共成员.要充分了解一个类,需要知道其私有 成员和保护成员,还要知道其方法所期望的参数,对此我们要使用API 1.获得反射API的转储 ...

  9. linux 下vim中关于删除某段，某行，或者全部删除的命令

  10. ABBYY简体中文版终身授权半价来袭，真的是5折！

    经过了一个春秋,心心念念的双十一终于要来了,一年时间并不长,但这一个月尤其慢!ABBYY官方称为回馈广大用户的支持与厚爱,双十一期间,ABBYY价格感人,诱惑难挡. 说到双十一活动,方式也是五花八门, ...