前言：

对于实时监听输入，这种需求大多数都是用于一个联想字提醒，智能提醒。大家都知道onkeydown，onkeypress，onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端，不是那么完美。

Demo：

Html5提供了一个标准事件oninput和IE的专属事件onpropertychange事件来监听输入值的变化。

<html>

<head>

    <title>搜索</title>

</head>

<body>

<input type="text" id="search_input">

<span id="inputorp_s"></span>

<script src="./jquery.js"></script>

<script>

    $(function () {

        //判断浏览器是IE?

        if (navigator.userAgent.indexOf("MSIE") != -1) {

            $('#search_input').bind('propertychange', getSmartTips);

        } else {

            $('#search_input').bind('input', getSmartTips);

        }

    });

    function getSmartTips() {

        $('#inputorp_s').text($(this).val());

        //todo:用ajax去后台拿智能联想数据

    }

</script>

</body>

</html>

实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题的更多相关文章

  1. 苹果手机输入中文不会触发onkeyup事件

    今天同事的项目有这个问题,用我的安卓手机输入中文是ok的,但是苹果手机就不行   使用keyup事件检测文本框内容:  $('#keyup_i').bind('keyup', function(){ ...

  2. 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  3. vue监听input标签的value值方法

    <input id="materialSearch" type="text" @keyup.enter="search" @input ...

  4. 【学习】文本框输入监听事件oninput

    真实项目中遇到的,需求是:一个文本框,一个按钮,当文本框输入内容时,按钮可用,当删除内容时,按钮不可用. 刚开始用的focus和blur, $(".pay-text").focus ...

  5. 监听文本框输入oninput和onpropertychange事件

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...

  6. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件

    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...

  7. input在输入中文时所触发的事件（防止输入中文时重复执行）

    一般在监听文本框输入时监听文本内容改变事件,可以使用oninput和onchange事件,两者区别在于oninput在文本输入状态可以一直监听变化,onchange在文本框失去焦点时才会触发,所以要想 ...

  8. JS和vue文本框输入改变p标签的内容测试

    文本框输入,p标签的内容自动变成文本框的内容,如下是三种方法的测试: 方法1:JS里的onchange,当文本框内容改变事件,该事件里写的方法是,获取p标签本身,然后获取文本框的值,赋值给变量,最后给 ...

  9. jQuery实现限制input框 textarea文本框输入字符数量的方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. C++ 11 学习3：显示虚函数重载(override)

    5.显示虚函数重载 在 C++ 里,在子类中容易意外的重载虚函数.举例来说: struct Base { virtual void some_func(); }; struct Derived : B ...

  2. react 组件的生命周期

    组件的生命周期 过程 装载(Mounting) :组件被插入到 DOM 中: 更新(Updating) :组件重新渲染以更新 DOM: 卸载(Unmounting) :组件从 DOM 中移除. 过程 ...

  3. struts.xml语法

    <!-- 1. struts.xml配置常量, 用来覆盖struts.properties中的默认常量配置 一般情况下, 这个配置放在struts.xml中, 不要放在各个模块的xml中. co ...

  4. 从零开始学JavaWeb

    引言   记得上学时,有位导师说过一句很经典的话:"编程语言只是工具,最重要的是掌握思想." 笔者一直主要从事.net领域的开发工作.随着工作阅历的丰富,越来越深刻的理解当年导师说 ...

  5. Source Map入门教程

    部署前端之前,开发者通常会对代码进行打包压缩,这样可以减少代码大小,从而有效提高访问速度.然而,压缩代码的报错信息是很难Debug的,因为它的行号和列号已经失真.这时就需要Source Map来还原真 ...

  6. 【收集】sql查询统计，周，月，年

    昨天 select * from tb where datediff(day, 时间字段 ,getdate()) = 1 今天 select * from tb where datediff(day, ...

  7. JavaScript实现常见排序算法

    列表 冒泡排序 选择排序 插入排序 快速排序 希尔排序 归并排序 冒泡排序 // 输入:[5, 6, 3, 4, 8, 0, 1, 4, 7] // 输出:[0, 1, 3, 4, 4, 5, 6, ...

  8. Java实现非递归删除目录

    最近在学C#的文件系统, 发现C#的文件系统貌似比java的东西少一点, 居然连删除目录都直接做好封装了, 想到学java的时候还要自己写递归删除, 好像没写过非递归的,就在网上查了下, 关于非递归删 ...

  9. MySQL中的一些内置函数

    mysql> select now(); #获取当前的日期和时间 +---------------------+ | now() | +---------------------+ | -- : ...

  10. android 热更新 tinker 从零开始到使用

    这几天项目完结了,闲来无事,想起来了以前研究的热更新,那个开源的只有nvwa.recoo,等,不是很好用,最近听说tinker开源一段时间了,用的人还挺多,决定研究一下! 首先进入了官方文档 http ...