javascript基础。表单操作

转载 2016年06月01日 22:47:47

原文地址:http://www.cnblogs.com/aqbyygyyga/archive/2011/10/24/2222621.html

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

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

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

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

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

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

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

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

    text

    radio

    checkbox

    file

    password 密码框

    button 按钮

    submit 提交按钮

    Reset 重置

    Hidden 隐藏域

    image

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

    <textarea/> --多行文本框,尺寸由rowscols来定义

    二、对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字段),都包含同样的属性方法和事件

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

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

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:提交表单

<input type = “submit” value=“提交”/>

<input type=“image” src=“submit.gif”/>

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

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

<form method=“post” action=“javascript:alert(‘submitted’)”/>

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

var oForm = document.Forms[0];

oForm.submit();

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

 <input type="button" value="提交" onclick="go()" />

   function go()

   {

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

      {

        document.forms[0].submit();

      }

   }

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

正确代码:

<form action="http://yahoo.com.cn" name="form1" onsubmit="return go()">

function go()

   {

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

     {return true;

      }else

     return false;}

应用3:重置表单

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

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

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

<form action="http://yahoo.com.cn" name="form1" onreset = "return resetform()">

   function resetform()

   {

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

      {

             return true;

      }else

        return false;

   }

 

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

<form action="http://yahoo.com.cn" name="form1" onsubmit=“return go()">

function go()

   {

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

      {

        document.forms[0].submit();

      }else

           return false;

   }

应用4:仅提交一次

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

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

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

<input type="submit" name="mysubmit" value="提交"   />

function go()

   {

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

      {

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

             return true;

      }else

        return false;

   }

 

 

 

三、文本框(texttextarea)

size:允许显示的字符数

maxlength:最多容纳的字符数

如:

<input type=“text” size=20;maxlength=“50”/ value=“mytest”>

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

textarea指定最大字符数无效

获取和更改文本框的值

<input type=“text” id=“mytxt” size=20;maxlength=“50”/ value=“mytest”>

使用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--自动选择文本

<input type=“text” onfocus=“this.select()”/>

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

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

<BODY onload="setTextFocuse()">

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].onkeyup=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].onkeydown=function(){

                                         var event = window.event;

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

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

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

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

<textarea id="txt1" cols="10" rows="20" maxlength="10" onkeypress="return isNotMax(this)" ></textarea>

function isNotMax(oTextArea)

{

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

}

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

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

1、阻止无效的字符

<input type=“text” invalidchars=“0123456789” onkeypress="return blockChars(this)"/>

     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、允许有效的字符

<input type="text" id="txtUser" acceptChars="0123456789" onkeypress="return allowChars(this)" />

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、禁止粘贴(禁止右键菜单)

<input type="text" id="txtUser" acceptChars="0123456789" onkeypress="return allowChars(this)" onpaste="return false" oncontextmenu="return false"/>

// oncontextmenu="return false" 禁止右键菜单

// onpaste="return false"禁止粘贴

改造上述方法:

<input type="text" id="txtUser" acceptChars="0123456789" onkeydown="return allowChars(this,true)"/>

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:使用上下按键操作数字文本

<input type="text" name="txtNumeric" value="0" Max="10" Min="0" onkeydown="numericScroll(this)" />

        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

 <option value=“1”>18-21</option>

 <option value=“2”>22-25</option>

 <option value=“3”>26-29</option>

 <option value=“4”>over 35</option>

</select>

组合框

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

 <option value=“1”>18-21</option>

 <option value=“2”>22-25</option>

 <option value=“3”>26-29</option>

 <option value=“4”>over 35</option>

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

}

<input type="button" value="getValue" onclick="add(document.getElementById('selAge'),'newText','5')"/>

5、删除选项

function Del(index){

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

   oListBox.options[index]=null;

// oListBox.remove(index);}

<input type="button" value="delete" onclick="Del(1)"/>

清空所有选项

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

 

}

   

 

<td style="width:100px">

<select id="fromList" size="10" style="width:100px">

 <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></td>

<td style="width:50px;text-align:center">

<input type="button" value=" << " onclick="goLeft()"/><p/>

<input type="button" value=" >> " onclick="goRight()"/>

</td><td>

<select id="toList" size="10" style="width:100px">

</select>

7、重新排序选项

function shiftUp(oListBox,iIndex)

{

   if (iIndex>0)

   {

      var oOption = oListBox.options[iIndex];

    var oPrevOption = oListBox.options[iIndex-1];

    oListBox.insertBefore(oOption,oPrevOption);//把后者插入到前者

   }

}

function shiftDown(oListBox,iIndex)

{

   if (iIndex<oListBox.options.length-1)

   {

      var oOption = oListBox.options[iIndex];

    var oNextOption = oListBox.options[iIndex+1];

    oListBox.insertBefore(oNextOption,oOption);

   }

}

 

相关文章推荐

JavaScript基础(5)之form表单-基本操作

焦点管理 在 HTML5 工作草案中,DOM 属性 activeElement 与方法 hasFocus() 为程序员提供了更好的控制页面交互的能力,特别是对于用户行为引发的交互。例如,它们都可以用...
  • hope_It
  • hope_It
  • 2017年06月04日 15:06
  • 296

javascript操作表单

获取表单1,getElementById() 2,getElementsByTagName() 3,documents.forms[] 每个form为一个数组元素 4,document.form...

JavaScript笔记(浏览器下-操作表单以及文件)

操作表单以及操作传输文件

[JavaScript][表单文本框&下拉列表框操作]

[JavaScript][表单文本框&下拉列表框操作]
  • Konaji
  • Konaji
  • 2016年03月03日 15:05
  • 238

使用JavaScript操作表单

使用JavaScript操作表单关键字: 使用javascript操作表单        下面讲述的是使用javascript对表单进行简单基础的操作:1:获取表单的引用 在开始对表单进行编程前,必须...

javascript之表单操作

$(function(){ $(":input").focus(function(){ $(this).addClass("focus"); ...
  • wcc526
  • wcc526
  • 2013年11月29日 20:55
  • 1720

JavaScript学习笔记二十五:操作表单

JavaScript教程传送门HTML表单的输入控件主要有以下几种: 文本框,对应的,用于输入文本; 密码框,对应的,用于输入密码; 单选框,对应的,用于选择一项; 复选框,对应的,用于选择多项; 下...

JavaScript-4.1-简单的表单操作,函数使用方法---ShinePans

4.1 确认表单必填项目完整性 function check_submit(){ if($("tex_user_name").value=="") {alert("请输入用...

JavaScript 操作 表单

获取值 设置值 HTML5控件 提交表单 Demo HTML表单的输入控件主要有以下几种: 文本框,对应的,用于输入文本; 口令框,对应的,用于输入口令; 单选框,对应的,用于选择一项; ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript基础。表单操作
举报原因:
原因补充:

(最多只允许输入30个字)