`

javascript表单

JavaScriptHTML 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>formUtil.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    

  </head>
  <script type="text/javascript">
  	//innerText和innerHTML，outerText和outerHTML的区别
  	//<div><b>Hello</b> world</div>
  	//innerText是指Hello
  	//innerHTML是指<b>Hello</b> world
  	//outerText是指Hello world
  	//outerHTML是指<div><b>Hello</b> world</div>
  	
  	//如何获得表单的引用
  	//第一种:var oForm = document.getElementById("form1");
  	//第二种:var oForm = document.forms[0];
  	//第三种:var oForm = documnet.forms["form1"];
  	
  	//表单中字段的获得
  	//第一种:var eText = oForm.elements[0];
  	//第二种:var eText = oForm.elements["name"]; 
  	//第三种:var eText = oForm.textbook; 这个是根据元素的name属性获得
  	//第四种:var eText = oForm["sname"];
  	//document.getElementById();
  	
  	//表单中字段的共性
  	//disabled,form(表单中的元素获得当前form),blur(),focus()
  	
  	//focus到第一个非hidden字段
  	var FormUtil = new Object;
  	
  	FormUtil.focusFirst = function(){
  		if(document.forms.length>0){
  			for(var i=0;i<document.forms[0].elements.length;i++){
  				var oField = document.forms[0].elements[i];
  				if(oField.type!="hidden"){  					
  					oField.focus();
  					//选择文本
  					//oField.select();
  					return;
  				}
  			}
  		}
  	};
  	//给文本字段加上select();
  	FormUtil.setTextboxes = function() {
	    var colInputs = document.getElementsByTagName("input");
	    var colTextAreas = document.getElementsByTagName("textarea");
	        
	    for (var i=0; i < colInputs.length; i++){
	        if (colInputs[i].type == "text" || colInputs [i].type == "password") {
	            colInputs[i].onfocus = function () { this.select(); };
	        }
	    }
	        
	    for (var i=0; i < colTextAreas.length; i++){
	        colTextAreas[i].onfocus = function () { this.select(); };
	    }
	};
	
	//自动切换到下一个
	FormUtil.tabForward = function(oTextbox){
		var oForm = oTextbox.form;		
		if(oForm.elements[oForm.elements.length-1]!=oTextbox && oTextbox.value.length==oTextbox.maxLength){			
			for (var i=0; i<oForm.elements.length; i++) {
				if (oForm.elements[i] == oTextbox) {
	                 for(var j=i+1; j < oForm.elements.length; j++) {
	                     if (oForm.elements[j].type != "hidden") {
	                         oForm.elements[j].focus();
	                         return;
	                     }
	                 }
	                 return;
	            }
        	}	
		}
	};
	
	
  	window.onload = function(){
  		FormUtil.focusFirst();
  		FormUtil.setTextboxes();
  	};
  	
  	//表单的提交
  	//<input type="image" src="sweat.gif">
  	//<input type="submit" src="Submit">
  	//oForm.submit();
  	
  	//仅提交一次
  	//this.disabled = true;this.form.submit();
  	
  	//选择文件select()
  	//<input id="my" type="text" name="" value="abc" onfocus="javascript:this.select();">
  	
  	
  	
  </script>
  <body>
	<form action="">
		<input type="hidden" name="" value="">
		信息:<input id="my" type="text" name="" value="abc" maxLength="10" onkeyup="javascript:FormUtil.tabForward(this);"><br/>
		信息:<textarea rows="10" cols="30">abc</textarea>		
		<input type="image" src="sweat.gif">		
	</form>
  </body>
</html>
分享到：
| jsp中影响编码的属性及其设置小结(content ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics