前言：

对于实时监听输入，这种需求大多数都是用于一个联想字提醒，智能提醒。大家都知道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. 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-4

    来个目录吧: 第一章-入门 第二章- Entity Framework Core Nuget包管理 第三章-创建.修改.删除.查询 第四章-排序.过滤.分页.分组 第五章-迁移,EF Core 的co ...

  2. 多线程爬坑之路-ThreadLocal源码及原理的深入分析

    ThreadLocal<T>类:以空间换时间提供一种多线程更快捷访问变量的方式.这种方式不存在竞争,所以也不存在并发的安全性问题. This class provides thread-l ...

  3. 记 suds 模块循环依赖的坑-RuntimeError: maximum recursion depth exceeded

    下面是soa接口调用的核心代码 #! /usr/bin/python # coding:utf-8 from suds.client import Clientdef SoaRequest(wsdl, ...

  4. HTML5学习笔记<五>: HTML表单和PHP环境搭建

    HTML表单 1. 表单用于不同类型的用户输入 2. 常用的表单标签: 标签 说明 <form> 表单 <input> 输入域 <textarea> 文本域 < ...

  5. css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏

    最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...

  6. html5实例-闪烁的星星

    一.绘制五角星 1.1页面结构 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  7. RMQ问题(线段树算法，ST算法优化)

    RMQ (Range Minimum/Maximum Query)问题是指: 对于长度为n的数列A,回答若干询问RMQ(A,i,j)(i,j<=n),返回数列A中下标在[i,j]里的最小(大)值 ...

  8. 将node.js程序作为服务，并在windows下开机自动启动（使用forever）

    手上项目中有一块服务是用node.js实现的,运行环境是windows server 2008 R2,刚开始着手实现这块功能的时候时间很紧迫,随便写了个console程序就部署上去了--启动方式就是在 ...

  9. C++—动态内存管理之深入探究new和delete

    C++中程序存储空间除栈空间和静态区外,每个程序还拥有一个内存池,这部分内存被称为自由空间(free store)或堆(heap).程序用堆来存储动态分配的对象,即,那些程序运行时分配的对象.动态对象 ...

  10. cassandra高级操作之分页的java实现（有项目具体需求）

    接着上篇博客,我们来谈谈java操作cassandra分页,需要注意的是这个分页与我们平时所做的页面分页是不同的,具体有啥不同,大家耐着性子往下看. 上篇博客讲到了cassandra的分页,相信大家会 ...