专栏首页web秀H5中input输入框如何实现原生键盘搜索功能

H5中input输入框如何实现原生键盘搜索功能

前言

在H5开发中,经常会开发搜索功能,商品列表、订单列表、客户列表等等,都需要搜索,所以程序猿(程序媛)们都会遇到这样的需求,点击搜索input时,弹出的键盘,有“搜索”按钮,点击搜索调用接口搜索。今天就来讲讲怎么搞定这个需求。

html代码

<form action="javascript:;" id="searchFrom" onsubmit="searchList">
  <input type="search" value="" placeholder="搜索Javan的博客" />
</form>

js代码

  1. 元素绑定方法调用
function searchList(){
  // do something
}
  1. jquery监听
$('#searchFrom').bind('submit', function () {
  // do something
});

注意事项

  1. action="javascript:;"这里的作用是,防止页面刷新,如果不写,页面会刷新
  2. type="search""input的类型需要是search
  3. input输入框必须放到form表单中
  4. 这样写input框输入值后,会有清除按钮,需要改变样式,或者去除,请看下方代码
input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none; // 此处只是去掉默认的小×
}

自定义样式

input[type=search]::-webkit-search-cancel-button{
    -webkit-appearance: none;

    position: relative;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: #EBEBEB;
}

input[type=search]::-webkit-search-cancel-button:after{
    position: absolute;
    content: 'x';
    left: 25%;
    top: -12%;
    font-size: 20px;
    color: #fff;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 线条之美,玩转SVG线条动画

    通常来说web前端实现动画效果主要通过下面几种方案: 1. css动画: 利用css3的样式效果可以将dom元素做出动画的效果来。 2. c...

    Javanx
  • JavaScript正则表达式入门知识详细介绍

    正则表达式,在各种语言(JS、Java、Php等)里面都是很常见的,而且语法都有相似之处。作为新手,第一次接触正则,可能一脸茫然,这是什么东西,语法这么奇怪。其...

    Javanx
  • JavaScript中undefined与null详解

    对于undefined和null我一直知道他们有很多区别,也知道一点关于他们的区别,但却不具体系统,因此总结了一下,主要心得如下:

    Javanx
  • iOS自定义键盘搜索键

    之前知道HTML5的input属性,新增了一种type=search。当系统焦点在input[type=search]元素上时,iOS会自动更改键盘的确认按键为...

    libo1106
  • type与元类

    用户1733462
  • Java泛型你看这篇文章就对了

    泛型是Java中一个非常重要的知识点,在Java集合类框架中泛型被广泛应用。本文我们将从零开始来看一下Java泛型的设计,将会涉及到通配符处理,以及让人苦恼的类...

    JAVA葵花宝典
  • 手把手教你搞定权限管理,结合Spring Security实现接口的动态权限控制!

    首先我们需要创建一个过滤器,用于实现动态权限控制,这里需要注意的是doFilter方法,对于OPTIONS请求直接放行,否则前端调用会出现跨域问题。对于配置在I...

    macrozheng
  • [读书笔记]C#学习笔记四: C#2.0泛型 可控类型 匿名方法和迭代器

    一枝花算不算浪漫
  • java应用CAS

      CAS(Compare and Swap),即比较并替换。jdk里的大量源码通过CAS来提供线程安全操作,比如AtomicInteger类。下面我们来分析一...

    良辰美景TT
  • 封装自己的dapper lambda扩展-设计篇

    昨天开源了业务业余时间自己封装的dapper lambda扩展,同时写了篇博文《编写自己的dapper lambda扩展-使用篇》简单的介绍了下其使用,今天将分...

    陈珙

扫码关注云+社区

领取腾讯云代金券