zoukankan      html  css  js  c++  java
  • jQuery搜索框输入实时进行查询

    在手机上,我们期望在搜索框中输入数据,能够实时更新查询出来的内容,不需要按回车。

    实现方式为:

    $(".search").bind("input propertychange",function(event){
        //进行查询操作
    })

    一、首先分清下面几个概念:
    onchange事件:此事件会在元素内容发生改变,且失去焦点的时候触发。浏览器支持度较好。
    onpropertychange事件:此事件会在元素内容发生改变时立即触发,即便是通过js改变的内容也会触发此事件。元素的任何属性改变都会触发该事件,不止是value。只有IE11以下浏览器支持此事件。
    oninput事件:此事件会在value属性值发生改变时触发,通过js改变value属性值不会触发此事件。只有IE8以上或者谷歌火狐等标准浏览器支持。
    二、然后我们主要是结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。
    oninput 是 HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。不过oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代。所以就有了以上的写法。

  • 相关阅读:
    work_27_一次springBoot+orcal+Mabits PageHele的使用
    work_26_swagger2整合springBoot和使用
    work_25_docker--RabbitMq消息队列
    work_24_MYSQL从create table... 到分库分表
    work_23_常用的工具类
    work_22_MySQL分库分表的初识
    work_21_AtomicInteger API
    work_20_stream的使用
    MySQL 基础语句的练习2
    MySQL 基础语句的练习
  • 原文地址:https://www.cnblogs.com/luoyihao/p/12301740.html
Copyright © 2011-2022 走看看