<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]。他在表格中是屬于哪個行和列的呢?????????

    頂!  回復  更多評論   

    主站蜘蛛池模板: 日本一道一区二区免费看 | 色噜噜AV亚洲色一区二区| 亚洲av乱码一区二区三区按摩| 一区二区无码免费视频网站| 亚洲人成图片网站| 手机在线毛片免费播放| 久久久久亚洲国产AV麻豆| 日本一道一区二区免费看| 免费国产污网站在线观看不要卡| 午夜亚洲av永久无码精品| 夜夜爽妓女8888视频免费观看| 亚洲人成无码www久久久| a级毛片免费高清毛片视频| 亚洲va无码va在线va天堂| 最近中文字幕2019高清免费| 亚洲成a人片在线观看中文!!! | 日韩一品在线播放视频一品免费| 亚洲高清乱码午夜电影网| jizzjizz亚洲| 青青草原1769久久免费播放| 亚洲日产2021三区在线| 女人18毛片特级一级免费视频| 四虎影视久久久免费观看| 国产亚洲人成网站在线观看不卡| 久久99精品视免费看| 天天爽亚洲中文字幕| 亚洲AV蜜桃永久无码精品| 野花香在线视频免费观看大全| 亚洲蜜芽在线精品一区| 日产乱码一卡二卡三免费| 国产福利在线观看永久免费| 亚洲精品第五页中文字幕| 永久在线毛片免费观看| 国内精品久久久久影院免费| 中文字幕在线观看亚洲日韩| 亚洲伊人久久综合中文成人网| 57pao国产成永久免费视频| 最新亚洲人成无码网站| 久久久婷婷五月亚洲97号色| 免费a级毛片视频| 精品熟女少妇av免费久久|