例子：

效果：

前端代码：

<%@ 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. Java Interface,反射

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

  2. Redis中的value包含中文显示的问题？

    linux 系统 redis不识别中文  如何显示中文 在Redis中存储的value值是中文“马拉斯加”Shell下get获取后展示的结果为:\xc2\xed\xc0\xad\xcb\xb9\xbc ...

  3. 深入理解-HashMap

    一.HashMap概述 HashMap 在家族中位置:实现了Map接口,继承AbstractMap类.HashMap 允许key/value 都为null. 二.HashMap存储结构 HashMap ...

  4. 基于visual Studio2013解决算法导论之054图的邻接矩阵表示

     题目 图的邻接矩阵表示 解决代码及点评 // 图的邻接矩阵表示.cpp : 定义控制台应用程序的入口点. // #include <iostream> #include <l ...

  5. 基于visual Studio2013解决C语言竞赛题之0519最大值

     题目

  6. Java CopyOnWriteArrayList分析

    CopyOnWriteArrayList是一种线程安全的ArrayList,顾名思义,它会利用写时拷贝技术,它对共享对象做仅仅读操作的时候,大家都用一个共享对象,假设有可变的操作时,就会复制一份出来, ...

  7. Java 实现享元(Flyweight)模式

    /** * 字母 * @author stone * */ public class Letter { private String name; public Letter(String name) ...

  8. c# 阶段总结

    然并卵然并卵然并卵然并卵然并卵然并卵然并卵

  9. Http方式获取网络数据

    通过以下代码可以根据网址获取网页的html数据,安卓中获取网络数据的时候会用到,而且会用Java中的sax方式解析获取到数据.(sax解析主要是解析xml)具体代码如下: package com.wy ...

  10. 我的Python成长之路---第一天---Python基础（1）---2015年12月26日（雾霾）

    2015年12月26日是个特别的日子,我的Python成之路迈出第一步.见到了心目中的Python大神(Alex),也认识到了新的志向相投的伙伴,非常开心. 尽管之前看过一些Python的视频.书,算 ...