javascript表单

最新推荐文章于 2016-07-05 16:43:17 发布

langhua9527

最新推荐文章于 2016-07-05 16:43:17 发布

阅读量98

点赞数

分类专栏： html+javascript+css 文章标签： JavaScript HTML ViewUI

html+javascript+css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏


<!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>

langhua9527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript表单

[code="js"] formUtil.html //innerText和innerHTML，outerText和outerHTML的区别 //Hello world //innerText是指Hello //innerHTML是指Hello world //o...
复制链接

扫一扫