欲实现一个文字搜索的功能,要求输入时,键盘回车按钮提示显示为“搜索”。效果如下:

开始~

input type=text并不能达到这种效果,google了一下,HTML5 增加的type=search可以做到(但需要input type=search外面包上一层带action属性的form)。

        <div class="search-input-wrap clearfix">
<div class="form-input-wrap f-l">
<form id="searchForm" action="" class="input-kw-form">
<input type="searchInput" autocomplete="off" name="baike-search" placeholder="请输入关键词" class="input-kw">
</form>
<i class="iconfont if-message"></i>
<i class="iconfont if-close"></i>
</div>
<i class="search-cancel f-l">取消</i>
</div>

但type=search会有许多默认样式和行为,这次开发遇到的有:

  • 会默认下拉框显示搜索历史记录;

  • 输入时自动弹出“x”,“x”的样式在不同手机上,样式不同;

  • iOS 手机(测试时为iphone6 ios10)上输入框为椭圆形.

但我们希望样式按照我们自定义的样式显示,并且各个手机上能统一。

于是几经google,得到答案:

  • 设置input autocomplete="off"去掉弹出的下拉框;

  • 将默认的“x”隐藏掉:

input[type="search"]::-webkit-search-cancel-button{
display: none;
}
  • 针对ios 设置样式, 去除ios下input 椭圆形:

-webkit-appearance: none;

同时别忘记,如果提交搜索时想使用ajax,那么可以阻止表单的默认行为

$('#searchForm').on('submit', function(event){
    //拦截表单默认提交事件
event.preventDefault();
//获取input框的值,用ajax提交到后台
var content = $('#
searchInput').val();
$.ajax()..........
});


截图参考:https://segmentfault.com/a/1190000007765742

【转】H5 input search 提交事件的更多相关文章

  1. iphone H5 input type="search" 不显示搜索 解决办法

    H5 input type="search" 不显示搜索 解决办法 H5 input type="search" 不显示搜索 解决方法 在IOS(ipad iP ...

  2. H5 input type="search" 不显示搜索 解决方法

    在IOS(ipad iPhone等)系统的浏览器里打开H5页面.如下写法: <input type="search" name="search” id=" ...

  3. input type=“submit”屏蔽自带的提交事件

    <p><input type="submit" class="submit" value="确认支付" onclick=& ...

  4. js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行

    js jq输入框中按回车触发提交事件,用户在页面输入后按回车(Enter键)进行 代码如下: <!DOCTYPE html> <html lang="en" xm ...

  5. form中的button默认提交事件

    <form action=""> <input autocomplete="off" type="text" name=& ...

  6. 关于input的焦点事件

    关于input的焦点事件 $(".scanf_integral").focus(function(){//获取焦点//获取焦点后触发的事件 }) $(".scanf_in ...

  7. 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize

    1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...

  8. form表单input回车提交问题

    问题:文本框输入完成后点击回车页面刷新问题出在form上,当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容,就会发生刷新事件. 解决方法: 1.增加一个隐藏的输入框 <input ...

  9. 使用 elementUI 的表单进行查询,表单中只有一个文本框时,回车会自动触发表单的提交事件,导致页面的刷新。

    使用elementUI的el-form组件进行查询时,当输入框仅有一项时,回车自动提交表单,浏览器会刷新页面: 原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 从而导致页面刷新. ...

随机推荐

  1. 实践一些js中的prototype, __proto__, constructor

    <!DOCTYPE html> <html> <head> <title>ExtJs</title> <meta http-equiv ...

  2. EXTJS之DATA PROXY READER

    这是不依赖于STORE的读取.我测试了很久,原来在新版本的EXTJS里.modelmanager.getmodel之类的不用了. 更改为静态的LOAD办法. <!DOCTYPE html> ...

  3. ZooKeeper搭建系列集 (这套很全,也很详细)

    原文链接:http://blog.csdn.net/shatelang/article/details/7596007 本篇文章结构: 总共包括10个系列 ZooKeeper系列之一:ZooKeepe ...

  4. ionic3中使用自定义配置

    新工作接触了ionic,以前没用过,只是离职前短暂接触过类似的vuex,到需要修改公司项目的时候临时差什么学什么,其中一个是自定义配置项 配置是很常见的设置,之前用的thinkphp的配置很清晰,基本 ...

  5. SQL优化(SQL TUNING)之10分钟完毕亿级数据量性能优化(SQL调优)

    前几天.一个用户研发QQ找我,例如以下: 自由的海豚. 16:12:01 岛主,我的一条SQL查不出来结果,能帮我看看不? 兰花岛主 16:12:10 多久不出结果? 自由的海豚 16:12:17 多 ...

  6. makepy

    文件连接: https://files.cnblogs.com/files/mophy/%E7%99%BB%E5%BD%95%E6%B5%81%E7%A8%8B%E5%88%86%E6%9E%90.7 ...

  7. class com.sun.jersey.core.impl.provider.entity.XMLJAXBElementProvider$Text

    运行mapreduce遇到的错: Java.lang.ClassCastException: classcom.sun.jersey.core.impl.provider.entity.XMLJAXB ...

  8. spring属性的三种注入方法

    (1)使用set方法: public class Book {  private String bookname;public void setBookname(String bookname) {  ...

  9. cdev_init和register_chrdev区别

    --- 01:include/linux/fs.h static inline int register_chrdev(unsigned int major, const char *name, co ...

  10. Spring版本功能变更&Spring4.x的新特性

    有朋友想知道Spring不同版本都有哪些功能变更,说直接在百度搜索找到的结果都不是想要的,其实还是关键词不对,找Spring不同版本的新特性就能获得更好的结果.其实在Spring工程github的wi ...