js学习小结（十四）2014.5.23（onpropertychange、oninput、onchange的区别与联系以及正则表达式的应用）

最新推荐文章于 2021-11-21 19:01:45 发布

zd10101501

最新推荐文章于 2021-11-21 19:01:45 发布

阅读量1.7k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/danzhang1010/article/details/27959421

版权

js 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

1.正则表达式的应用

（参考资料：（1）正则表达式的优先级（2）括号使用）

正则表达式用于检测输入的邮箱地址是否合法：var reg=/^([0-9a-zA-Z]+[\_|\.]?)*[a-zA-Z0-9]+@([0-9A-Za-z]+[\.|\_]?)*[a-zA-Z0-9]+\.[A-Za-z]{2,3}$/g;

[0-9a-zA-Z]+[\_|\.]? 字母数字开头，后面可以是_ . 也可以没有，在[]中使用分支条件

使用正则表达式验证这样一个字符串，“12,3,2,1,3,8,9,10”所有的数字都小于等于12，除了最后一个数字，其余的数字后面都有一个逗号，

核心就在于使用正则表达式验证数字的范围为1-12，1-9可以通过“[1-9]”表示，10-12可以通过"1[0-2]"表示，在此可以使用分支条件来判断是一位数还是二位数，因此就有两种写法

([1-9])|(1[0-2]) 或者 (1[0-2])|([1-9]),来看看这两种写法的差异。

var reg4=/^(((1[0-2])|[1-9])\,)*((1[0-2])|[1-9])$/g;//

var reg7=/^(([1-9]|(1[0-2]))\,)*([1-9]|(1[0-2]))$/g;

var str="12,11,1,7,8,12,9";

console.log(reg4.test(str));//true

console.log(reg7.test(str));//true

说明这两个是没有差异的，此外还要注意一点括号的使用，在正则表达式中和在其他计算式中一样，都可以通过括号来改变匹配的优先级，有关优先级的，可以参考http://blog.csdn.net/danzhang1010/article/details/28242335

2.onpropertychange,oninput,onchange 这三个事件用于监控控件属性改变。

onchange：当控件的属性发送改变时触发，在低版本的ie中（ie8及以下）当控件的属性，无论是value还是样式发送改变，在控件失去焦点之后就会触发该事件；在高版本的ie及其他浏览器中，只有当内容发生改变并且当控件失去焦点之后会触发该事件。

onpropertychange：ie中专有的属性发生改变时触发的事件，该事件不会等控件失去焦点之后再触发。如果在该事件的处理程序中改变控件属性，就会造成栈溢出。

oninput：非ie浏览器中的事件，但是只有当控件的内容发送改变时才触发该事件。

注意：在chrome和非chrome中触发input事件有所不同，在chrome中，如果使用输入法输入中文，由于中文需要先输入拼音字母或者笔画，会造成触发好几次input事件，但是在非chrome中，只有当内容输入到文本框，将文本框中的值改变之后，才会触发oninput事件。

可以利用onpropertychange和oninput完成类似的功能

<body>
<textarea id='testArea' cols="20" rows="10" color='grey'>
	welcometo my blog.
</textarea>
<p>你还可以输入 <span id='wordcount'>200</span>字</p>
<input type="button" value='changeTheTextAreaValue' id='Btn'/>
<p id='result'></p>
<script type="text/javascript" src='../AdvancedDomScripting/js/ADS.js'></script>
<script type="text/javascript">


	(function(){
	    	var result=ADS.$('wordcount');
         var max=200;
		ADS.addEvent('testArea','focus',function(e){
			var target=ADS.getEventTarget(e);

			if(target.value==target.defaultValue){
				target.value="";
				target.style.color='black';
			}

		});
		ADS.addEvent('testArea','blur',function(e){
			var target=ADS.getEventTarget(e);
			if(target.value.replace(/(^(\s)*)|((\s)*)$/g,"")==""){
				target.value=target.defaultValue;
				target.style.color='grey';
				result.innerHTML=max;
			}

		});
		ADS.addEvent('testArea','change',function(){
			//console.log("changed:"+this.value);
			//result.innerHTML+="changed:"+this.value+"<br>";
			//会在元素的属性（在低版本ie中的 文本或者样式等任何属性，在非ie和高版本的ie中的内容属性）改变，并且元素失去焦点的时候触发
		});
		ADS.addEvent('testArea','propertychange',function(e){
			//console.log("propertychangechanged:"+this.value);
			//result.innerHTML+="propertychangechanged:"+this.value+"<br>";
			//ie特有的，会在元素的属性（文本或者样式等任何属性）改变，但是元素不一定失去焦点就会触发
			var target=ADS.getEventTarget(e);
           var target=ADS.getEventTarget(e);
           var remain=max-target.value.length;
           if(remain<=0){
           	remain=0;
           	target.value=target.value.substring(0,199);

           }
          result.innerHTML=remain;
		});
		ADS.addEvent('testArea','input',function(e){
			//document.write("input:"+this.value);
			//result.innerHTML+="input:"+this.value+"<br>";
			//其他浏览器兼容的方法，只在文本内容改变时触发，在输入中文时会因为输入法的原因在不同浏览器中（chrome和非chrome）的触发次数也不一样，在chrome中，没输入一个英文字母都会触发			
			var target=ADS.getEventTarget(e);            
            var remain=max-target.value.length;
           if(remain<=0){
           	remain=0;
           	target.value=target.value.substring(0,199);

           }
          result.innerHTML=remain;
          
		});
		ADS.addEvent('Btn','click',function(){
			var area=ADS.$('testArea');
			area.style.color='red';
		});		
		
	})();	
	
</script>
</body>