这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 js 监听 input 输入框值的实时变化实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
1、在元素上同时绑定 oninput 和 onporpertychanger 事件
例:
- <script type="text/JavaScript">
- function aa(e) {
- alert("inputting!!");
- }
- </script>
- <input type="text" id="a" oninput="aa(event)" onporpertychange="aa(event)"
- />
2、使用原生 js 添加监听事件
- <script type="text/javascript">
- $(function() {
- if ("\v" == "v") { //true为IE浏览器,感兴趣的同学可以去搜下,据说是现有最流行的判断浏览器的方法
- document.getElementById("a").attachEvent("onporpertychange",
- function(e) {
- console.log("inputting!!");
- }
- } else {
- document.getElementById("a").addEventListener("onporpertychange",
- function(e) {
- console.log("inputting!!");
- }
- }
- });
- </script>
- <input type="text" id="a" />
3、使用 jQuery 方法绑定事件
- <script type="text/javascript">
- $(function(){
- $("#a").bind('input porpertychange',function(){
- console.log("e");
- });
- });
- </script>
- <input type="text" id="a"/>
在监听到 onpropertychange 事件后,可以使用 event 的 propertyName 属性来获取发生变化的属性名称,event.propertyName
实例 1:
<input type="text"oninput=" "onpropertychange="" value="Text field" />
实例 2:
- $("#name").bind('input porpertychange',function(){
- var thisTxt=$("#name").val();
- $(this).siblings("p").html(thisTxt)
- })
实例 3:
- //手机号码分段显示
- register.phonePropertychange = function() {
- _this = register;
- _input = $(this);
- var v = $(this).val();
- v = v.replace(new RegExp(/ /g), '');
- var v1 = v.slice(0, 3);
- var v2 = v.slice(3, 7);
- var v3 = v.slice(7, 11);
- if (v2 == '') {
- _input.focus().val(v1);
- } else if (v3 == '') {
- _input.focus().val(v1 + ' ' + v2);
- } else {
- _input.focus().val(v1 + ' ' + v2 + ' ' + v3);
- };
- //手机号输入完成字体颜色改变
- if (v.length === 11) {
- if (_this.regexpPhone(v)) {
- _input.CSS('color', '#000');
- $('#btnSendCode').addClass('c-26a949');
- _input.blur();;
- } else {
- layer.open({
- content: '手机号码不正确,请重新输入',
- time: 2,
- end: function() {
- _input.val('');
- }
- });
- }
- } else {
- _input.css('color', '#26a949');
- }
- }
- //验证手机号
- register.regexpPhone = function(phone) {
- return /^1[3|4|5|7|8]\d{9}$/.test(phone);
- }
以上这篇 js 监听 input 输入框值的实时变化实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0526/328120.html