例子：

效果：

前端代码：

<%@ 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. application（expand）--easyui

    一,效果图. 二,源代码. <!DOCTYPE html><html><head> <meta charset="UTF-8"> & ...

  2. Java Interface,反射

    先看代码, package reflect; //Class Word public class Word implements OfficeAble{ public static void main ...

  3. IDEA 中使用Maven Compile 找不到本地 Jar

    本文地址:http://www.cnblogs.com/duwei/p/4656410.html 在IDEA 的子 Maven Module 中使用 compile 进行编译, 一开始提示从私有远程仓 ...

  4. PHP面向对象基础实例

    <?phpclass marine{ public $blood = 50; //剩余的血 public $kills = 0; //杀敌数量 static $all_num = 0;//兵的数 ...

  5. PyQt中登录框设计

    很多软件,比如QQ,亦或一些管理系统,运行之后都会先弹出一个登录框,只有登录成功了,才能进入软件主界面. 以前在邮件列表中回答过如何做登录框,这里重新整理下. 从刚开始做Delphi的时候就有不少人纠 ...

  6. 多玩YY聊天记录解析全过程

    再来一发,现在开始! 下载安装YY,观察YY目录,很明显的发现了sqlite3.dll,这个数据库很多很多很多软件都在用,简单小巧且开源.删除sqlite3.dll 进入YY,历史记录不能正常显示,基 ...

  7. Python 2.7 学习笔记 条件与循环语句

    本文介绍下python条件和循环语句的语法 一.if条件语句 语法格式如下: if 表达式: .... elif 表达式: .... elif 表达式: .... else: ..... 说明:与其它 ...

  8. Android的BUG（四） - Android app的卡死问题

    做android,免不了要去运行一些跑分程序,常用的跑分程序有quadrant(象限),nbench,安兔兔等.作为系统工程师,对这些跑分 程序都非常的不屑,这个只能是一个不客观的参考,但客户都喜欢拿 ...

  9. arm汇编：ldr,str,ldm,stm,伪指令ldr

    ldr,str,ldm,stm的命名规律: 这几个指令命名看起来不易记住,现在找找规律. 指令 样本 效果 归纳名称解释 ldr Rd,addressing ldr r1,[r0] addressin ...

  10. 高级UIKit-08(TCPSocket)

    [day1001_MoviePlayer]:视频播放 需要导入MediaPlayer.framework - (void)viewDidLoad { [super viewDidLoad]; NSUR ...