javascriptフォーム

4472 ワード
JavaScript html

<!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>
JavaScriptにあるすべての文字列を置換します.