例子：

效果：

前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="Scripts/jquery-1.8.3.min.js"></script>

    <script type ="text/javascript">

        $(document).ready(function () {

            $('#btntext').bind('input propertychange', function () {

                $('#Info').html($(this).val().length + ' characters');

            });

        })

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input id="btntext" type="text" />

        <span id ="Info"></span>

    </div>

    </form>

</body>

</html>

===============================================================================

(1)先说jquery, 使用 jQuery 库的话，只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了，示例代码：

$('#username').bind('input propertychange', function() {

    $('#content').html($(this).val().length + ' characters');

});

(2)对于JS原生写法而言， oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。oninput 事件在主流浏览器的兼容情况如下：

　　从上面表格可以看出，oninput 事件在 IE9 以下版本不支持，需要使用 IE 特有的 onpropertychange 事件替代，这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发，有以下几种情况：

  • 修改了 input:checkbox 或者 input:radio 元素的选择中状态， checked 属性发生变化。
  • 修改了 input:text 或者 textarea 元素的值，value 属性发生变化。
  • 修改了 select 元素的选中项，selectedIndex 属性发生变化。

　　在监听到 onpropertychange 事件后，可以使用 event 的 propertyName 属性来获取发生变化的属性名称。

　　集合 oninput & onpropertychange 监听输入框内容变化的示例代码如下：

<head>

    <script type="text/javascript">

    // Firefox, Google Chrome, Opera, Safari, Internet Explorer from version 9

        function OnInput (event) {

            alert ("The new content: " + event.target.value);

        }

    // Internet Explorer

        function OnPropChanged (event) {

            if (event.propertyName.toLowerCase () == "value") {

                alert ("The new content: " + event.srcElement.value);

            }

        }

    </script>

</head>

<body>

    Please modify the contents of the text field.

    <input type="text" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)"

     value="Text field" />

</body>

　　

JS、JQury - 文本框内容改变事件的更多相关文章

  1. JS事件 文本框内容改变事件（onchange）通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

    文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...

  2. JS来推断文本框内容改变事件

       oninput,onpropertychange,onchange的使用方法 onchange触发事件必须满足两个条件: a)当前对象属性改变,而且是由键盘或鼠标事件激发的(脚本触发无效) b) ...

  3. jquery文本框内容改变事件

    /** * 内容改变时并不会触发事件,但是在失去焦点的时候会触发. */ $("#inputid").change(function(){ console.log($(this). ...

  4. 捕获input 文本框内容改变的事件(onchange,onblur,onPropertyChange比较)

    input 文本框内容改变,可以使用onchange或者onblur来判断,但onchange是在文本内容改变,然后失去焦点的时发生,onblur是在失去焦点时发生,不会自己去判断. 如: <i ...

  5. Jquery文本框值改变事件兼容性

    Jquery文本框值改变事件(支持火狐.ie)   Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: ? $(docum ...

  6. Jquery文本框值改变事件（支持火狐、ie）

    Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: $(document).ready(function () { $(& ...

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

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

  8. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  9. js监听文本框内容变化

    js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...

随机推荐

  1. 【转】CentOS 6.5 生产环境优化指南

    原文链接:https://www.deepwebcn.com/82.html centos6.5 CentOS 6.5 系统安装之后并不能立即投入生产环境使用,常常需要先经过我们运维人员的优化才行.优 ...

  2. php calling scope

    昨天在Yaf交流群, 大草原同学批评我变懒了, Blog很久没更新了, 今天刚好有人在Segmentfalut上问了我一个问题,  我在微博上也做了简单的解答, 不过感觉一句话说不清楚, 就写篇blo ...

  3. 编译安装MongoDB C++ Driver （win8.1 vs2013）

    在C++中调用mongodb的库函数需要安装mongodb的c++driver,需要自己编译,(自己搞了一天半 =_=''' ) 官网Build MongoDB From Source 说To bui ...

  4. iOS 用GDataXMLNode创建和解析XML

    原文地址:http://blog.csdn.net/gf771115/article/details/7718403 NSError *error; //    NSString *path = [[ ...

  5. BZOJ 1704: [Usaco2007 Mar]Face The Right Way 自动转身机( 贪心 )

    贪心...先枚举k, 然后从左往右扫一遍, 发现位置p的牛的状态不符合就将 [p, p + k ) 的牛都转身, 假如p + k - 1 已经超过了最右边牛的位置那这个k就不符合要求. 符合要求的就可 ...

  6. Ext.net中常用的三种交互方式

    http://www.ext.net.cn/forum.php?mod=viewthread&tid=10433

  7. android handler looper thread

    在线程中调用包含创建handler方法的时候,会报错,提示: “need call Looper.prepare()” -- 在创建之前,调用Looper.prepare()方法来创建一个looper ...

  8. .NET支持上下左右移动操作

    效果如下图: 代码如下: public partial class ShowSet : System.Web.UI.Page { Hashtable resources = EquStatusSear ...

  9. [JBoss] JNDI与JBossNS

    JNDI的作用 JNDI是 Java 命名与目录接口(Java Naming and Directory Interface). 随着分布式应用的发展,远程访问对象访问成为常用的方法.虽然说通过Soc ...

  10. MFC：重绘Button，定制CButton，自画CPngButton，求赐教（各种bug包括性能bug）谢谢谢谢

    [1.]CPngButton.h(资源是最后图片) #pragma once #include<atlimage.h> #define PNUM 19 #define PLAYTIME 1 ...