javascript基础。表单操作

最新推荐文章于 2021-08-27 12:26:42 发布

act9ps

最新推荐文章于 2021-08-27 12:26:42 发布

阅读量338

点赞数

HTML表单是通过<form/>元素来定义的,它有以下特性

◦ method –表示浏览器发挞GET请求或是发送POST请求

◦ action – 表示表单所要提交到的地址URL

◦ enctype – 当向服务器端发送数据时，数据应该使用的编码方法，默认的是application/x-www-url-encoded,不过，如果上传文件，可以设置成multipart/form-data.

◦ accept – 当上传文件时，列出服务器能正确处理的mime类型

◦ accept-charset – 当提交数据时，列出服务器所能接受的字符编码

表单可以包含任意数目的输入元素

u <input/> --主要的HTML输入元素。通过type特性来判断是哪种输入控件

• text

• radio

• checkbox

• file

• password 密码框

• button 按钮

• submit 提交按钮

• Reset 重置

• Hidden 隐藏域

• image

• <select/> -- 组合框与下拉列表框,里面的值由<option/>元素定义.

• <textarea/> --多行文本框，尺寸由rows和cols来定义

• 二、对form元素进行脚本编程

• 1、如何获取form表单

• var oForm = document.getElementById(“form1”)

• var oForm = document.forms[0]

• var oForm = document.forms[“form1”]

• 2、访问表单字段(利用name属性)

• var oField = oForm.elements[0];

• var oField = oForm.elements[“txtUser”]//通过id访问

• var oField = oForm.txtUser

• var oField = oForm[“txtUser”]

• 注：也可直接用document.getElementById(“txtUserID”);

表单字段的共性

所有表单字段（除hidden字段）,都包含同样的属性方法和事件

u disabled特性:用于获取或设置表单控件是否被禁用

u blur()方法，可以使表单字段失去焦点（将焦点移到他处）

u focus()方法，可以使表单获得焦点

例:

Var oFiled1 = oForm.elements[0];

Var oFiled2 = oForm.elements[1];

oField1.disabled = true; //禁用

oField2.focus();//获取焦点

alert(oField1.form == oForm); //output “true”

应用1:聚焦于第一个字段

注意：让form的第一个元素获取焦点的代码：

document.forms[0].elements[0].focus()

但此时，如果第一个字段是隐藏字段，则会出错

故代码应如下所示：

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();

return;}

}

应用2:提交表单

当用户点击一个按钮，无需其他编码，就可以提交表单，如果按回车，默认也认为是提交表单

可以在action中加入警告来检测表单是否提交

利用submit()方法来提交表单,如：

var oForm = document.Forms[0];

oForm.submit();

也可用按钮结合上述代码实现提交表单

} function go()

} {

} if (confirm("你确实要提交吗？"))

} {

} document.forms[0].submit();

} }

以上代码无论是否点击确定都会提交

正确代码：

function go()

{

if (confirm("你确实要提交吗？"))

{return true;

}else

return false;}

} 应用3：重置表单

<input type=“reset” value=“重置”/> onreset事件，表单元素恢复到页面加载的状态

类似于提交按钮，reset也会触发form的onreset事件，可以在此处取消表单的重置.

同时，表单也有reset()方法，可以直接从脚本中重置表单，而无需使用重置按钮

} function resetform()

} {

} if (confirm("你确实要重置表单吗？"))

} {

} return true;

} }else

} return false;

} }

表单的onsubmit事件：表单提交前会触发表单此事件,可以在此处进行表单的验证，并取消表单提交

} function go()

} {

} if (confirm("你确实要提交吗？"))

} {

} document.forms[0].submit();

} }else

} return false;

} }

应用4:仅提交一次

<input type=“button” value=“submit”

οnclick=“this.disabled=true;this.form.submit()”/>

或

<form action=“xxx.aspx" name="form1" οnsubmit="return go()"

} function go()

} {

} if (confirm("你确实要提交吗？"))

} {

} document.forms[0].mysubmit.disabled = true;

} return true;

} }else

} return false;

} }

三、文本框(text与textarea)

size:允许显示的字符数

maxlength:最多容纳的字符数

如：

<textarea rows=“25” cols=“5”>mytest</textarea>//指定textarea的行数和列数

textarea指定最大字符数无效

获取和更改文本框的值

使用document.getElementById(“mytxt”).value来获取或更改文本框的值,如：

var objtxt = document.getElementById(“mytxt”);

If (objtxt)

{

objtxt.value=“aaa”;

}

使文本获得焦点 objtxt.focus(); 选择文本 objtxt.select();

} 文本框事件

focus事件：文本框得到焦点时发生

blur事件:文本框失去焦点时发生

change事件：更改内容后失去焦点时发生（如通过value对其修改则不会触发）

select事件:当一个或多个字符选中时发生，无论是否通过select()方法。

应用1--自动选择文本

文本框获取焦点后自动选中文本

但如果所有文本都想这样？可通过如下js实现

function setTextFocuse(){

var oInput = document.getElementsByTagName("input");

var oTextArea = document.getElementsByTagName("textarea");

for(var i=0;i<oInput.length;i++) {

if (oInput[i].type=="text" || oInput[i].type=="password"){

oInput[i].onfocus = function(){this.select();}}}

for(var i=0;i<oTextArea.length;i++) {

if (oTextArea[i].type=="text" || oTextArea[i].type=="password"){

oTextArea[i].onfocus = function(){this.select();}

}

应用2 – 自动切换到下一个

应用说明：当某个文本框只允许接受指定数量的字符串时，如果能直接切换到下一个字段，岂不很好，当输入社会安全码、身份证号或是产品ID数字时，常会用到这个功能

function AttachKeyUp(){

var oInputs = document.getElementsByTagName("input");

for(var i=0;i<oInputs.length;i++) {

if (oInputs[i].type!=="hidden" && oInputs[i].getAttribute("maxlength")!=2147483647) {

oInputs[i].οnkeyup=function(){tabForward(this);};

// tabForward(this)焦点自动跳到下一个可用文本框

}

function tabForward(oTextBox) {

var oForm = oTextBox.form;//获取表单元素

if (oForm.elements[oForm.elements.length-1]!=oTextBox

//当前表单最后元素是不是当前元素

&& oTextBox.value.length == oTextBox.getAttribute("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++){

oForm.elements[j].focus();//下一个文本框获得焦点

return; }} } } }

=========敲回车进入下一文本框

function AttachKeyDown() {

var oInputs = document.getElementsByTagName("input");

for(var i=0;i<oInputs.length;i++) {

if (oInputs[i].type!=="hidden") {

oInputs[i].οnkeydοwn=function(){

var event = window.event;

if (event.keyCode==13) //按下键的aciLL值

{enterForward(this); } }; } }}

应用3 -- 限制textarea的字符数

虽然<input/>元素可以很容易地限制允许的字符数量，但<textarea/>元素却不能，它没有maxlength属性，解决方法是用javascript来模仿maxlength属性.如：

function isNotMax(oTextArea)

{

return oTextArea.value.length!=oTextArea.getAttribute("maxlength");

}

onkeypress 事件会在键盘按键被按下并释放一个键时发生。 Textbox写入数值的时候一直触发这个事件

应用4 – 允许/阻止文本框中的字符

1、阻止无效的字符

function blockChars(oTextBox) { // invalidchars不可用的字符

var oEvent = window.event;//得到对象

var sInvalidChars = oTextBox.getAttribute("invalidChars");

var sChar = String.fromCharCode(oEvent.keyCode);//将键盘获取到的Unicode 转换成字母或数字

var bIsValidChar = sInvalidChars.indexOf(sChar)==-1;

return bIsValidChar;//return true说明能输入进去，如果return false 说明输入不进去

}

2、允许有效的字符

function allowChars(oTextBox){

var oEvent = window.event; // acceptChars允许输入字符

var sallowChars = oTextBox.getAttribute("acceptChars");

var sChar = String.fromCharCode(oEvent.keyCode);

var bIsValidChar = sallowChars.indexOf(sChar)>=0;

return bIsValidChar;

}

3、禁止粘贴(禁止右键菜单)

// οncοntextmenu="return false" 禁止右键菜单

// οnpaste="return false"禁止粘贴

改造上述方法：

function allowChars(oTextBox,bBlockPaste){

var oEvent = window.event;

var sallowChars = oTextBox.getAttribute("acceptChars");

var sChar = String.fromCharCode(oEvent.keyCode);

var bIsValidChar = sallowChars.indexOf(sChar)==-1;

if (bBlockPaste) {//如果允许他粘贴

oTextBox.oncontextmenu =function(){ return false};//允许右键菜单

if (oEvent.ctrlKey && sChar=="V") {//检测是不是ctrl+v

return false; } }

return bIsValidChar ; }

应用5:使用上下按键操作数字文本

function numericScroll(oTextBox){

oEvent = window.event;//得到事件对象

var iValue = oTextBox.value.length ==0?0:parseInt(oTextBox.value);

var iMax = oTextBox.getAttribute("Max");

var iMin = oTextBox.getAttribute("Min");

if (oEvent.keyCode==38) {//向上箭头

if (iMax==null || iValue<parseInt(iMax)) {

oTextBox.value = iValue+1; }

}else if (oEvent.keyCode == 40) //向下箭头

{if (iMax==null || iValue>parseInt(iMin)) {

oTextBox.value = iValue-1; } }}

列表框与组合框

<select name=“selAge” id=“selAge”>//相当于combox

</select>

组合框

<select name=“selAge” id=“selAge” size=“3”> //相当于listbox

</select>

1、访问选项

var oListbox = document.getElementById(“selAge”);

alert(oListbox.options[1].firstChild.nodeValue);

或

alert(oListbox.options[1].getAttribute(“value”);

alert(oListbox.options[1].text)

alert(oListbox.options[1].value);

alert(oListbox.options[1].index); //获取索引

alert(oListbox.options.length); //获取选项个数

2、获取设置选中项

alert(oListbox.selectedIndex); //获取选中项索引

alert(oListbox.options[oListbox.selectedIndex].text); //获取选项中项文本

oListbox.selectedIndex=-1; //设置未选中

3、设置列表项多选项

} <select name="selAge" id="selAge" size="4" multiple="multiple">

// multiple="multiple"实现多选

} <option value="1" selected>18-21</option>

} <option value="2">22-25</option>

} <option value="3" selected>26-29</option>

} <option value="4">over 35</option>

} </select>

//得到多选

function getSelectedIndexs (oListBox){

var arrIndexs = new Array();

for(var i=0;i<oListBox.options.length;i++){

if (oListBox.options[i].selected) {

arrIndexs.push(i);//把索引放入数组} }

return arrIndexs;

}

4、给下拉列表框添加选项

function add(oListBox,sName,sValue)

{

var oPtion = document.createElement("option");//创建一个节点

oPtion.appendChild(document.createTextNode(sName));

//创建一个文本节点添加到option

if (arguments.length == 3)//如果有第三个选项

{

oPtion.setAttribute("value",sValue);

}

oListBox.appendChild(oPtion);

}

5、删除选项

function Del(index){

var oListBox = document.getElementById("selAge");

oListBox.options[index]=null;

// oListBox.remove(index);}

清空所有选项

function Clear(oListBox){

for(var i=oListBox.options.length-1;i>=0;i--) {

oListBox.remove(i); }} //一定要从后往前删除

6、移动选项

function move(oListFrom,oListTo,index){ //要移动的组合框，要移动到的组合框，要移动项

var oOption = oListFrom.options[index];

if (oOption){

oListTo.appendChild(oOption);}}



	function add(oListBox,sName,sValue)
	{
	var oPtion = document.createElement("option");
	oPtion.appendChild(document.createTextNode(sName));
	if (arguments.length == 3)
	{
	oPtion.setAttribute("value",sValue);
	}
	oListBox.appendChild(oPtion);
	}

	function Del(index)
	{
	var oListBox = document.getElementById("selAge");
	//oListBox.options[index]=null;
	oListBox.remove(index);

	}

	function move(oListFrom,oListTo,index)
	{
	var oOption = oListFrom.options[index];
	if (oOption)
	{
	oListTo.appendChild(oOption);
	}
	}

	function goRight()
	{
	var oListFrom = document.getElementById("fromList");
	var oListTo = document.getElementById("toList");

	move(oListFrom,oListTo,oListFrom.selectedIndex);
	}

	function goLeft()
	{
	var oListFrom = document.getElementById("toList");
	var oListTo = document.getElementById("FromList");

	move(oListFrom,oListTo,oListFrom.selectedIndex);
	}