这段时间一直在做移动端,所以遇到很多问题,现在很多网站在做移动端搜索的时候都不会在后面加一个搜索按钮,而是直接调用输入法上面的搜索搜索按钮进行搜索

input的一个新属性给我们提供非常方便的书写, 就是 type = search;如果直接这么写,在IOS上可能会有问题

<form action="#">

    <input type="search" placeholder="请输入..." name="search" />

</form>

需要一个form标签套起来,并且设置action属性,这样写完之后输入法的右下角就会自动变成搜索

那么怎么去调用这个按钮呢,点击之后可以搜索,有两种写法

第一中就是利用form的action来调用,这种对于写原生函数好使

<body>

    <form action="javascript:search();">

        <input type="search" name="" placeholder="请输入" id="search">

    </form>

</body>

<script type="text/javascript">

function search() {

    var s = document.getElementById('search').value;

    if (s === '') {

        return;

    }

    document.getElementById('search').blur();

    alert('搜索' + document.getElementById('search').value)

}

</script>

后面会有一个小❌,这个一般不是我们想要的,因为在不同的浏览器表现不一样, 可以直接去掉这个小叉

    <style>

        input[type="search"] {

            height: 30px;

            width: 200px;

            border: 1px solid #ccc;

            font-size: 14px;

            outline: none;

            -webkit-appearance:none;

        }

        input[type="search"]::-webkit-search-cancel-button{

            -webkit-appearance: none;

        }

    </style>

如果想要一个小叉,我的做法是在后面添加一个span标签,写一个样式,点击的时候清空input的value值就可以了

第二种方法

移动端也支持keyup,keydown时间,也可以通过检测按下的健来判断是否是搜索按键

其实搜索按键对应键盘上面的就是回车键,也就是keyCode = 13;

js 移动端写搜索时怎么调用软键盘上面的搜索按钮的更多相关文章

  1. 解决appium点击软键盘上的搜索按钮

    在执行appium自动化测试的时候,需要点击软件盘上的搜索按钮. 具体操作步骤如下: 前提:需要事先安装搜狗输入法 1.唤醒软件盘,可以封装到一个类里,用到的时候随时调用. import os#调起s ...

  2. form表单提交和ajax表单提交，关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作

    [文章来源]由于自己对于form研究甚少,所以一直用的都是AJAX进行提交,这次后台提出要用form提交,顺便深入研究一下:之前在做表单的时候,发现input可以通过设置不同的type属性,调用不同的 ...

  3. edittext把软键盘上的回车键改为搜索、发送或者 下一步，窗口随软键盘弹出而改变。

    http://m.blog.csdn.net/article/details?id=51350501 以上博文讲解很详细. 如图所示,有时候为了布局美观,在搜索时没有搜索按钮,而是调用软件盘上的按钮. ...

  4. 在IOS输入框中 键盘上显示“搜索”

    移动端web页面上使用软键盘时如何让其显示“前往”(GO)而不是换行?‘ 用一个 form 表单包裹住就会显示前往,单独的一个 input 就会提示换行.下面是测试地址: 有表单:https://js ...

  5. PHP解决搜索时在URL地址栏输入中文字符搜索结果出现乱码

    这 个问题的出现的前提是本站代码采用utf-8格式,php空间当页面停留在搜索页面时,在浏览器的地址栏输入中文的关键字进行搜索时会出现乱码,在网上查找资料说 明,是因为浏览器默认将url中的中文字符编 ...

  6. input输入时软键盘回车显示搜索

    很多时候我们会看到输入法里面回车是搜索等字眼,今天我们就来实现这个效果 原本的效果: <form action＝""> <input type＝"sea ...

  7. 移动端解决fixed和input获取焦点软键盘弹出影响定位的问题

    场景描述, 当document的高度不够window的高度时候,如在ip6中文档的高度比窗体的高度小,到底设计在最下方的区域没有在窗体最下方,就留有空白地方如下图的灰色部分 1. 解决初始化文档高度, ...

  8. [问题]Android listView item edittext 不能调用软键盘输入法

    android listview item edittext not  softkeyboard edittext可以获取焦点, 可以触发事件, 但是就是不能调用输入法, 不知道为什么? 难道不能在i ...

  9. IOS微信端软键盘收起后界面按钮失效问题

    问题描述: 1.在vue里封装了一个confirm的弹窗(即如下一个弹窗) 2.发现在IOS微信客户端中打开后,当需要在表单中输入内容的时候,很自然的点击了键盘右上角的[完成]按钮 3.啊~~~,惊人 ...

随机推荐

  1. gcc 源代码分析-前端篇3

    3. GCC怎样函表示一个函数   对c语言来说.函数是其核心,全部的东西都在环绕着函数在转.对于一个函数来说.它基本的一些特性例如以下:    1. 有一个返回值,在这里我们没有把返回值的函数觉得它 ...

  2. xml文档读取-SAX

    由于dom采用的是将xml文档加载入内存进行处理的方式,如果xml文档较大,则会导致加载时间过长,效率降低的情况,因此,sun公司在JAXP中又添加了对SAX的支持: SAX,全称Simple API ...

  3. SpringMVC实现JSON与前台交互

    这几天忙着做学校的项目,感觉好久没有更新博客了,来整理一下. 由于要实现的功能是表单联动,只能自己去写ajax来实现提交给后台接口了,好久没有写前端,好多东西都忘记了,只能可怜巴巴的用原生的js去实现 ...

  4. idea将maven项目打包成war包的方式，以及使用war包

    打包WAR过程 首先对项目进行编译.然后执行以下步骤: 单击下图红色方框处  在IDEA右侧出现maven project选项  单击maven project选项,出现Spring MVC Basi ...

  5. 此地址使用了一个通常用于网络浏览以外目的的端口。出于安全原因，Firefox 取消了该请求。

    火狐无法访问本机IIS部署的网站,弹出:此地址使用了一个通常用于网络浏览以外目的的端口.出于安全原因,Firefox 取消了该请求 的解决办法 关于火狐浏览器访问本机IIS部署的网站弹出"此 ...

  6. jspsmart(保存文件)+poi(读取excel文件)操作excel文件

    写在前面: 项目环境:jdk1.4+weblogic 需求:能上传excel2003+2007 由于项目不仅需要上传excel2003,还要上传excel2007,故我们抛弃了jxl(只能上传exce ...

  7. 37、mysql初识

    之前我们写代码需要存取信息时用的是文件可是用文件存取数据非常局限,今天我们将走进一个新的世界mysql 一.数据库由来 之前所学,数据要永久保存,比如用户注册的用户信息,都是保存于文件中,而文件只能存 ...

  8. Oracle安装步骤

    1.在Oracle官网下载安装包: 2.非常重要:两个压缩包都要解压(不是分卷压缩的,不然安装过程中会报找不到文件的错误,被坑过!): 3.关闭所有安全相关软件(关闭杀毒软件.防火墙.windows ...

  9. jquery如此强大，为什么还要写原生呢？

    这是一个伪标题,其实是一篇年终总结. 在这家公司一年多,蛮多收获的.大部分来自自己,小部分来自公司. 做前端开发到现在,我觉得可以分为两部分. 前半部分做项目用原生js,jquery以及各种基于jq的 ...

  10. Python 项目实践二（下载数据）第四篇

    接着上节继续学习,在本节中,你将下载JSON格式的人口数据,并使用json模块来处理它们.Pygal提供了一个适合初学者使用的地图创建工具,你将使用它来对人口数据进行可视化,以探索全球人口的分布情况. ...