js怎么监听输入框的值(js如何监听输入框的实时变动去触发函数?)

1.js如何监听输入框的实时变动去触发函数?

js监听输入框的实时变动去触发函数:

$scope.input = {//初始化,避免ng-model绑定取不到值

Tel:'',

Pwd:''

}

$scope.$watch('input.Tel', function(newValue, oldValue) {

console.log($scope.input.Tel);

if ($scope.input.Tel != oldValue){

//当value改变时执行的代码

}

});

$scope.$watch('input.Pwd', function(newValue, oldValue) {

console.log($scope.input.Tel);

//当value改变时执行的代码

});

2.如何用原生js实现对输入框的监听

用js实现对两个文本框的监听 都不为空是登录按钮背景颜色改变js代码如下function check_login(){ var username=document.getElementById('username').value; var password=document.getElementById('password').value; if(username!="" && password!=""){ console.log("true"); getfocus('login'); login.style.backgroundColor="#3399CC"; }else{ console.log("false"); losefocus('login'); login.style.backgroundColor="#999999"; }}。

监听,输入框,js

3.JS监听INPUT[TEXT]的输入值问题

去判断keycode吧 onkeydown触发判断函数 kecode列表百度一下就有了

例子 输入abcd

<input name="" type="text" onkeydown="play(event.keyCode)"/><div id="t"></div>

<script>

function play(keycode){

var keyName;

switch(keycode){

case 65:

keyName='a';

break;

case 66:

keyName='b';

break;

case 67:

keyName='c';

break;

case 68:

keyName='d';

break;

}

document.getElementById('t').innerHTML=keyName;

}

</script>

4.如何实时监听 input 和 textarea输入框值的变化

在实际前端开发中我们经常会遇到要实时监听用户的输入,根据不同的输入值来采取不同的措施。

举一个常见的例子:我们在使用Google 搜索框进行搜索时,每多输入一个字,搜索框下方显示的匹配结果会实时变化。这样的效果就是通过实时监听搜索框的输入值变化从而提取不同的匹配结果来实现的。

那么,一般使用最多的输入框就是 input 和 textarea 了。要想实时监听这两种输入框的值变化,就不得不提到键盘事件 key event 了。

键盘相关事件 onkeydown onkeypress onkeyup oninput onchange onpropertychange onkeydown/onkeypress/onkeyup 使用这三个事件监听输入框值变化,不能监听到右键的复制、粘贴、剪切的操作。onkeydown 按下键盘上的任意键(不包括PrScrn键)时触发;如果一直按着键不放,则会一直触发此事件。

onkeypress 按下键盘上的可显示字符键(可以参考此文的键盘按键分类一节)时触发,如果一直按着键不放,则会一直触发此事件。onkeyup 释放键盘上的任意键(不包括PrScrn键)时触发1、是否可以捕获组合键?onkeydown/onkeyup可以捕获组合键,onkeypress 只能捕获单个字符。

在捕获组合键时建议使用 onkeyup 事件。2、是否区分大小写字符?onkeypress 能区分字符的大小写,onkeydown/onkeyup不能区分。

3、是否区分主键盘和小键盘的数字?onkeypress不区分主键盘和小键盘的数字,onkeydown/onkeyup则可以区分。4、触发顺序 先 onkeydown, 再 onkeypress, 最后onkeyup 参考文档 oninput/onpropertychange 上面讲到用 keydown/keypress/keyup无法监听右键粘贴复制操作,于是就有了 oninput 事件。

oninput是 HTML5的新事件,可以在输入框( textarea, input:text/password/search等)的value值发生变化时(通过 JS修改输入值除外)立即触发,所以可以监听右键粘贴复制操作。但 IE9.0以下版本不支持,此时需要用到IE特有的 onpropertychange事件。

在 Safari5.0以下版本,oninput 不支持 textarea 元素。onpropertychange是 IE特有的事件,与 oninput不同的是,只要绑定对象的相关属性(不单 value 值)发生变化(包括 通过JS脚本来修改)都会触发此事件。

onchange 要触发这个事件有2个必备条件:1、和onpropertychange一样,只要绑定对象的相关属性发生了变化就会触发此事件。但和onpropertychange不同,通过JS脚本改变属性时无法触发);2、输入框失去焦点后触发,所以无法做到实时监听;键盘按键分类 键盘上的每一个按键都对应唯一的 ASCII码值,从这个角度理解其实每一个按键都是字符键。

但这些按键可以分为2类: ASCII码控制字符键和 ASCII码可显示字符键。ASCII码控制字符键 控制字符键是不会产生我们能看到的字符的按键,这类控制字符键常见的有:F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键。

常见控制字符键对应的 ASCII码见下:ESC键 VK_ESCAPE (27) 回车键: VK_RETURN (13) TAB键: VK_TAB (9) Caps Lock键: VK_CAPITAL (20) Shift键: VK_SHIFT ($10) Ctrl键: VK_CONTROL (17) Alt键: VK_MENU (18) 空格键: VK_SPACE (32) 退格键: VK_BACK (8) 左徽标键: VK_LWIN (91) 右徽标键: VK_LWIN (92) 鼠标右键快捷键:VK_APPS (93) Insert键: VK_INSERT (45) Home键: VK_HOME (36) Page Up: VK_PRIOR (33) PageDown: VK_NEXT (34) End键: VK_END (35) Delete键: VK_DELETE (46) 方向键(←): VK_LEFT (37) 方向键(↑): VK_UP (38) 方向键(→): VK_RIGHT (39) 方向键(↓): VK_DOWN (40) F1键: VK_F1 (112) F2键: VK_F2 (113) F3键: VK_F3 (114) F4键: VK_F4 (115) F5键: VK_F5 (116) F6键: VK_F6 (117) F7键: VK_F7 (118) F8键: VK_F8 (119) F9键: VK_F9 (120) F10键: VK_F10 (121) F11键: VK_F11 (122) F12键: VK_F12 (123) ASCII码可显示字符键 可显示字符键是会产生我们能看到的字符的按键,这类按键常见得有:数字(包括 shift+数字)、字母(大小写)、小键盘。常用可显示字符键ASCII码如下:65 A 键66 B 键67 C 键68 D 键69 E 键70 F 键71 G 键72 H 键73 I 键74 J 键75 K 键76 L 键77 M 键78 N 键79 O 键80 P 键81 Q 键82 R 键83 S 键84 T 键85 U 键86 V 键87 W 键88 X 键89 Y 键90 Z 键。

5.js如何监听输入框的实时变动去触发函数

js监听输入框的实时变动去触发函数:$scope.input = {//初始化,避免ng-model绑定取不到值Tel:'',Pwd:''}$scope.$watch('input.Tel', function(newValue, oldValue) {console.log($scope.input.Tel);if ($scope.input.Tel != oldValue){//当value改变时执行的代码}});$scope.$watch('input.Pwd', function(newValue, oldValue) {console.log($scope.input.Tel);//当value改变时执行的代码});。

js怎么监听输入框的值

转载请注明出处JS代码网 » js怎么监听输入框的值(js如何监听输入框的实时变动去触发函数?)

资讯

js中的call和apply的用法(Javascript中call和apply的区别与详解)

阅读(6)

本文主要为您介绍js中的call和apply的用法,内容包括Javascript中call和apply的区别与详解,js中的call和apply方法的区别,js中的call和apply方法的区别。每个JavaScript函数都会有很多附属的(attached)方法,包括toString()、call()以及apply()。听

资讯

js写电商网站的各种功能(启用多进程webview这个有什么用)

阅读(8)

本文主要为您介绍js写电商网站的各种功能,内容包括用JavaScript库做电子商务网站的优缺点是什么?,启用多进程webview这个有什么用,用JavaScript库做电子商务网站的优缺点是什么。主要是用来加载网页的 如果你做浏览器相关的应用,肯定要使用w

资讯

js嵌套的对象进行ajax请求(JS如何实现Ajax的请求函数)

阅读(6)

本文主要为您介绍js嵌套的对象进行ajax请求,内容包括JS如何实现Ajax的请求函数,详解JavaScript实现设计模式中的适配器模式的方法,AJAX核心中的XMLHttpRequest对象是什么?。<script type="text/javascript"> <br> //请求函数 <br> function f

资讯

js得到input的文件(js文件里如何获取input的的值)

阅读(7)

本文主要为您介绍js得到input的文件,内容包括js文件里如何获取input的的值,javascript基础问题:得到inputtext里上的内容,inputfile在js里获取文件内容。根据id获取input节点2、通过value获取input的值示例:<body><input id=r1 type=text va

资讯

python爬去js加载的数据库(爬虫怎么爬取js后面加载的数据)

阅读(7)

本文主要为您介绍python爬去js加载的数据库,内容包括爬虫怎么爬取js后面加载的数据,有必要参加python培训班吗?,如何用python爬取网页中隐藏的div内容?。推荐个很好用的软件,我也是一直在用的,就是前嗅的ForeSpider软件,他有自己编写的脚本语

资讯

使用js清除当前用户的cookies(javascript怎样清除cookie)

阅读(6)

本文主要为您介绍使用js清除当前用户的cookies,内容包括如何使用js删除cookies?,javascript怎样清除cookie,js如何删除cookie。js清除cookie的方法一般是有两种方法。<br>一个是通过删除cookie的所有变量,其cookie也就随之被清除。代码实例

资讯

js对上传的文件加密(js客户端有没有好的方式实现加密)

阅读(8)

本文主要为您介绍js对上传的文件加密,内容包括如何加密javascript文件,js客户端有没有好的方式实现加密,图片加密上传的图片怎么加密。本帖最后由 liyihongcug 于 2014-1-26 22:59 编辑请参看地图web 好几家公司间接方式早已经实现的只不过

资讯

js中的call和apply的用法(Javascript中call和apply的区别与详解)

阅读(6)

本文主要为您介绍js中的call和apply的用法,内容包括Javascript中call和apply的区别与详解,js中的call和apply方法的区别,js中的call和apply方法的区别。每个JavaScript函数都会有很多附属的(attached)方法,包括toString()、call()以及apply()。听

资讯

js写电商网站的各种功能(启用多进程webview这个有什么用)

阅读(8)

本文主要为您介绍js写电商网站的各种功能,内容包括用JavaScript库做电子商务网站的优缺点是什么?,启用多进程webview这个有什么用,用JavaScript库做电子商务网站的优缺点是什么。主要是用来加载网页的 如果你做浏览器相关的应用,肯定要使用w

资讯

js嵌套的对象进行ajax请求(JS如何实现Ajax的请求函数)

阅读(6)

本文主要为您介绍js嵌套的对象进行ajax请求,内容包括JS如何实现Ajax的请求函数,详解JavaScript实现设计模式中的适配器模式的方法,AJAX核心中的XMLHttpRequest对象是什么?。<script type="text/javascript"> <br> //请求函数 <br> function f

资讯

python爬虫js加载的数据(Python怎么获取js动态加载的数据)

阅读(7)

本文主要为您介绍python爬虫js加载的数据,内容包括Python怎么获取js动态加载的数据,谁能科普一下搜索引擎对js加载的数据是如何抓取的呢?,如何用python爬取网页中隐藏的div内容。利用WebBrowser控件来获取js动态加载的数据:首先,我要在Docume