<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    和風細雨

    世上本無難事,心以為難,斯乃真難。茍不存一難之見于心,則運用之術自出。

    使用JavaScript操作表單


    獲取表單的引用

    在開始對表單進行編程前,必須先獲取表單<form>的引用.有以下方法可以來完成這一操作。
    1)采用典型的DOM樹中的定位元素的方法getElementById(),只要傳入表單的id即可獲得表單的引用:
    var vform=document.getElementById(“form1”);

    2)還可以用document的forms集合,并通過表單在form集合中的位置或者表單的name特性來進行引用:
    var oform=document.forms[0];
    var oform=document.forms[“formZ”];

    訪問表單字段

    每個表單字段,不論它是按鈕,文本框還是其它內容,均包含在表單的elements集合中.可以用它們的name特性或者它們在集合中的位置來訪問不同的字段:
    Var oFirstField=oForm.elements[0];
    Var oTextBox1=oForm.elements[“textBox1”];
    此外還可以通過名字來直接訪問字段,如:
    Var oTextBox1=oForm.textbox1;
    如果名字中有標記,則可以使用方括號標記:
    Var oTextBox1=oForm[“text box 1”];

    最常見的訪問表單字段的方法

    最簡單常用的訪問表單元素的方法自然是document.getElementById(),舉例如下:
    <input type="text" name="count"
          value="" />
    在JS中取得此元素內容的代碼為:
    var name=document.getElementById("name").value
    這種方法無論表單元素處于那個表單中甚至是不在表單中都能湊效,一般情況下是我們用JS訪問表單元素的首選.
    鑒于document.getElementById比較長,你可以用如下函數代替它:
    function $(id){
         return document.getElementById(id);
    }
    把這個函數放在共有JS庫中,在jsp頁面通過如下方法引用它:
    <head>
    <title>"記賬系統"添加資源頁面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="web/js/check.js" type="text/javascript"></script>
    <link rel="stylesheet" rev="stylesheet" href="web/css/style.css"
     type="text/css" />
    </head>
    此后你就可以直接使用$訪問表單元素中的內容:
    var name=$("name").value; 

    表單字段的共性

    以下是所有表單字段(除了隱藏字段)
    Disabled可以用來獲取或設置表單控件是否被禁用.
    Form特性用來指向字段所在的表單.
    Blur()方法使表單字段失去焦點.
    Focus()方法使表單字段獲得焦點.
    當字段失去焦點是,發生blur事件,執行onblur事件處理程序.
    當字段獲取焦點時,發生focus事件,執行onfocus事件處理函數.

    當頁面載入時將焦點放在第一個字段

    在body代碼中如此書寫:
    <body onload=“focusOnFirstElm()”>
    JS函數如下書寫:
    Fucntion focusOnFirstElm(){
         document.forms[0].elements[0].focus();
    }
    如果第一個字段不是隱藏字段此方法就是湊效的,如果是的話把elements的下標改成非隱藏字段的下標即可.

    控制表單只被提交一次

    由于Web的響應問題,用戶有可能會點擊多次提交按鈕從而創建重復數據或是導致錯誤,我們可以使用JS對提交按鈕進行設置以讓表單只被提交一次。
    <input type=“submit” value=“提交” onclick=“this.disabled=true;this.form.submit()”/>
    這里在點擊提交按鈕時執行了兩句JS代碼,一次是this.disabled=true;這是讓提交按鈕被禁用;一次是this.form.submit()這是提交這個按鈕所在的表單。

    檢查用戶在表單元素中的按鍵

    為控件添加 onkeydown事件處理,然后在函數查看keyCode,就能知道用戶的按鍵,代碼如下:
    <input type="text" name="test"
    value="" onkeydown="testkey(this,event)"/>
    JS代碼如下:
    function testkey(obj,event){
         alert(event.keyCode);
    }

    這種技巧在改善用戶體驗如按回車鍵提交表單時很常用。

    posted on 2008-03-02 15:23 和風細雨 閱讀(2265) 評論(2)  編輯  收藏 所屬分類: JavaScript

    評論

    # re: 使用JavaScript操作表單 2008-06-04 20:17 eeeeeeeeeee

    eeeeeeeeeeeee  回復  更多評論   

    # re: 使用JavaScript操作表單 2008-06-26 22:21 314696063

    寫得很好,,請問你一個問題 ,如果我曉得一個表格中表單元素,我怎么求出這個元素是在表格中的哪一行的哪一列呢,里面有隱藏值的,,怎么去得到呢,比如說:document.forms[0].elements[0];
    我怎么知道document.forms[0].elements[0]。他在表格中是屬于哪個行和列的呢?????????

    頂!  回復  更多評論   

    主站蜘蛛池模板: 亚洲1区2区3区精华液| 成人亚洲国产va天堂| 中国极品美軳免费观看| 免费人成在线观看网站视频| 香蕉成人免费看片视频app下载| 亚洲精品国产精品国自产观看 | 久久99毛片免费观看不卡| 亚洲精品乱码久久久久久中文字幕| fc2成年免费共享视频网站| 亚洲中久无码永久在线观看同| 一级毛片视频免费观看| 国产在线a免费观看| 亚洲成av人片不卡无码| 免费看韩国黄a片在线观看| 亚洲国产成人久久一区二区三区 | 免费人成在线观看69式小视频| 亚洲美女中文字幕| 成人网站免费观看| 阿v免费在线观看| 18禁无遮挡无码网站免费| 色婷婷亚洲一区二区三区| 中文字幕第13亚洲另类| 午夜精品射精入后重之免费观看 | 亚洲色图在线播放| 香蕉97超级碰碰碰免费公| 久久亚洲色WWW成人欧美| 亚洲人成网站在线播放vr| 黄页视频在线观看免费| 亚洲成AV人片在| 毛片a级毛片免费播放100| 免费夜色污私人影院网站| 亚洲爆乳无码一区二区三区| 日韩av无码成人无码免费| jizz18免费视频| 亚洲精品在线免费看| www亚洲精品少妇裸乳一区二区| 久久这里只精品热免费99| 亚洲综合色婷婷在线观看| 亚洲视频免费在线看| 处破女第一次亚洲18分钟| 亚洲精品在线观看视频|