jQuery实现页面监听(某一个值发生改变时触发)
使用jQuery实现页面中监听 页面中某一个值(如input输入框)发生改变时触发。
<html>
<head>
<title>RunJS</title> <!-- 引入自己的jQuery文件 -->
<script type="text/javascript" src="http://qtcrmtest.staff.xdf.cn/js/lib/jquery/jquery-1.4.2.js"></script> </head>
<body>
<h1 > 实时监测input中值的变化 </h1>
<input type="text" id="username" > <h1 > 实时监测下拉列表select中值的变化 </h1>
<select id="htlx" name="htlx" style="width:200px;">
<option value ="1">--无--</option>
<option value ="qc">全程</option>
<option value="dsq">单申请</option>
<option value="dqz">单签证</option>
<option value="dws">单文书</option>
<option value="qt">其他</option>
</select> <div id="result"></div>
</body>
</html> <script type="text/javascript"> //jquery
$(function(){ //监听input
$('#username').bind('input propertychange', function() {
$('#result').html($(this).val().length);
}); //监听select
$('#htlx').bind('input propertychange', function() {
$('#result').html($(this).val().length);
}); }
)
</script>
jQuery实现页面监听(某一个值发生改变时触发)的更多相关文章
- jquery的change():下拉框值改变时触发
<script src="jquery.min.js" type="text/javascript"></script> <scr ...
- Js/jQuery实时监听input输入框值变化
前言在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满 ...
- jQuery实时监听input的值变化(input的值产生变化才会触发事件)
//用于监听input的值变化(input的值产生变化才会触发事件) (function ($) { $.fn.watch = function (callback) { return this.ea ...
- 关于vue事件监听的一个问题
由于新工作需要用vue,所以最近接触最多的也是vue,因为之前一直在用react,所以对于vue上手还是很快的.我也尽量找一些他们两个的异同点,除了多了一些辅助用的方法以外,最大的不同应该是对于组件间 ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- 浅谈postMessage多页面监听事件
最近做了一个Echarts和Highcharts多图多页面连动的效果,就用到postMessage 如下介绍: 最开始在最外围的页面也就是所有页面的父级页面添加postMessage监听事件以便监听下 ...
- js监听文本框值变化事件,就oninput & onpropertychange & onkeyup & onchange的区别
在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
- js监听input输入框值的实时变化实例
情景:监听input输入框值的实时变化实例 解决方法:1.在元素上同时绑定oninput和onporpertychanger事件 实例:<script type="text/JavaS ...
- jQuery的滚动监听
jQuery的滚动监听 1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offs ...
随机推荐
- 上下行分流下行负载方式和能ping通但不能打开
1 下行线路负载方式选择 目的端口+协议 否则有可能出现微信443端口图片打不开的情况. 2.彭ping通但是打不开的情况下将上行线路mtu值改小 由1500改为1450
- 012——数组(十二) 数组range array_count_values array_pad array_product
<?php /*range () 生成包含指定范围的数组,第三个参数是步长值 */ /*$arr=range(1,10,2); print_r($arr);//输出:Array ( [0] =& ...
- 【Sizzle学习】之关于【初探 jQuery 的 Sizzle 选择器】这篇文章里的小bug
[题记]不可否认,这篇文章写得非常好,但是今天我在看sizzle源码的时候,发现这文章有一地方说的不妥.重现:当selectors为"p.class1>p.class2",j ...
- Linux:uniq命令详解
uniq uniq命令用于报告或忽略文件中的重复行,一般与sort命令结合使用. 语法 uniq(选项)(参数) 选项 -c或——count:在每列旁边显示该行重复出现的次数: -d或--repeat ...
- Flexible 弹性盒子模型之CSS order 属性
实例 设置弹性盒对象元素的顺序: div#myRedDIV {order:2;} div#myBlueDIV {order:4;} div#myGreenDIV {order:3;} div#myPi ...
- JAVA交换两个变量的值-(不使用第三变量)
以下方法的根本原理就是: 借助第三个变量 c = a; a = b; b = c; 运算符-不借助第三变量: a = a+b; b = a-b; a = a-b; 为运算符-不借助第三个变量: (此种 ...
- Windbg 调试工具32位/64位版本下载
最新的Windbg调试工具32位/64位版本越来越不好下载了,这里通过CSDN的渠道给大家一个下载地址,帮助大家更好下载工具: https://github.com/EasyDarwin/Tools/ ...
- SpreadJS 在 Angular2 中支持绑定哪些属性?
SpreadJS 纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎.排序.过滤.输入控件.数据可视化.Excel 导入/导出等功能,适用于 .N ...
- 【剑指offer】10A--求裴波那切数列的第n项,C++实现
#本文是牛客网<剑指offer>刷题笔记 1.题目 写入一个函数,输入n,输出裴波那切数列的第n项 2.思路 递归--时间和空间复杂度高 循环--时间和空间复杂度低,通过循环迭代计算第n项 ...
- cms与blog汇总
CMS ecms phpcms dedecms dilicms(CI框架) finecms Joomla dayucms DZ PHPwind Data地方门户网站 Blog wordpress ty ...