JavaScript 之 DOM [ 表單操做 ]

時間 2019-12-05

原文原文鏈接

表單操做

獲取表單元素

Document對象提供了單獨的獲取方式

document.forms

該屬性會獲得一個類數組集合

<body>
<form action="#">
    <input type="text">
</form>
<form action="#" name="biaodan">
    <input type="text">
</form>
<script>
    /* 該屬性會獲得一個類數組對象集合 */
    var form = document.forms;
    console.log( form );// 顯示 HTMLCollection(2) - 類數組對象
</script>
</body>

document.表單名稱

經過表單名稱會獲取到指定名稱的表單元素數組
- 新版本瀏覽器可能不支持

<body>
<form action="#">
    <input type="text">
</form>
<form action="#" name="biaodan">
    <input type="text">
</form>
<script>
    var formName = document.biaodan;
    console.log( formName );// 顯示 <form action="#" name="biaodan">...</form>
</script>
</body>

獲取表單組件元素

HTMLFormElement.elements屬性

經過HTMLFormElement對象提供的elements屬性來獲取指定表單中的全部組件

<body>
<form action="#">
    <input type="text" name="biaodan">
    <input type="submit">
</form>
<script>
    /* 獲取表單元素 */
    var form = document.forms[0];
    /* 經過HTMLFormElement對象提供的elements屬性來獲取指定表單中的全部組件 */
    var zujian = form.elements;
    console.log( zujian );// 顯示 HTMLFormControlsCollection(2) - 類數組對象
</script>
</body>

文本內容的選擇

select()方法

獲取當前輸入框中所選擇的文本內容瀏覽器
- 默認爲全選

<body>
<form action="#">
    <input type="text" id="input" value="請輸入你的帳號">
    <input type="submit">
</form>
<script>
    /* 定位指定元素 */
    var input = document.getElementById( 'input' );
    /* 爲指定表單組件綁定獲取焦點事件 */
    input.addEventListener( 'focus', function () {
        /* select()方法 - 選擇當前輸入框中所選擇的文本內容(默認爲全選) */
        input.select();
    } );
</script>
</body>

select事件

只要選擇文本內容就會觸發select()方法code
- selectionStart()方法orm
  - 選擇文本內容開始的位置(索引值)
- selectionEnd()方法對象
  - 選擇文本內容結束的位置(索引值)

<body>
<form action="#">
    <input type="text" id="input" value="請輸入你的帳號">
    <input type="submit">
</form>
<script>
    /* 定位指定元素 */
    var input = document.getElementById( 'input' );
    /*
        select事件
         * 只要選擇文本內容就會觸發select()方法
         * selectionStart - 選擇文本內容開始的位置(索引值)
         * selectionEnd - 選擇文本內容結束的位置(索引值)
     */
    input.addEventListener( 'select', function () {
    console.log( input.selectionStart, input.selectionEnd );// 顯示 對應文本內容的索引值

    /* 獲取輸入框中的文本內容 */
    var wenben = input.getAttribute( 'value' );
    /* 經過截串的方式獲取到用戶選取的文本內容 */
    var neirong = wenben.substring( input.selectionStart,input.selectionEnd );
    console.log( neirong );
    } );
</script>
</body>

設置文本內容

setSelectionRange()方法

設置選擇的文本內容索引
- 若是焦點在文本內容的最後面會全選文本內容
- 若是焦點在文本內容中的任意位置(不是最後)會選中設置文本內容

<body>
<form action="#">
    <input type="text" id="input" value="請輸入你的帳號">
    <input type="submit">
</form>
<script>
    /* 定位指定表單元素 */
    var form = document.forms[0];
    /* 獲取指定表單中的組件 */
    var zujian = form.elements[0];
    /* 爲指定表單組件綁定獲取焦點事件 */
    zujian.addEventListener( 'focus', function(){
        /*
            setSelectionRange()方法
             * 設置選擇的文本內容
              * 若是焦點在文本內容的最後面會全選文本內容
              * 若是焦點在文本內容中的任意位置(不是最後)會選中設置文本內容
         */
        zujian.setSelectionRange( 1, 5 );
    } );
</script>
</body>

下拉列表操做

HTMLSelectElement對象

length屬性事件
- 獲取當前<option>元素的個數
options屬性ip
- 獲取當前全部<option>元素(類數組集合)
selectedIndex屬性element
- 顯示當前被選中的列表項的索引值

<body>
<form action="#">
    <select id="game">
        <option id="lr" value="lr">怪物獵人</option>
        <option value="td">天涯明月刀</option>
        <option value="sm">使命召喚</option>
    </select>
</form>
<script>
    /* 定位指定表單組件 */
    var game = document.getElementById( 'game' );
    console.log( game.length );// 顯示 3(列表項個數)
    console.log( game.options );// 顯示 HTMLOptionsCollection(3)(類數組對象集合)
    console.log( game.selectedIndex );// 顯示 0(選中項的索引值)
</script>
</body>

HTMLOptionElement對象

index屬性get
- 獲取當前列表項的索引值
selected屬性
- 判斷當前列表項是否被選中
text屬性
- 獲取當前列表項的文本內容
value屬性
- 當前列表項的value屬性值

<body>
<form action="#">
    <select id="game">
        <option id="lr" value="lr">怪物獵人</option>
        <option value="td">天涯明月刀</option>
        <option value="sm">使命召喚</option>
    </select>
</form>
<script>
    /* 定位指定表單組件 */
    var lieren = document.getElementById( 'lr' );
    console.log( lieren.index );// 顯示 0(當前列表項的索引值)
    console.log( lieren.selected );// 顯示 true(當前列表項是否被選中)
    console.log( lieren.text );// 顯示 怪物獵人(當前列表項的文本內容)
    console.log( lieren.value );// 顯示 lr(當前列表項的value屬性值)
</script>
</body>

提交表單

submit事件

表單在進行提交時會觸發submit事件
該事件會在表單被提交以前,實現對錶單的驗證

<body>
<form action="#">
    <input type="text" id="kuang">
    <input type="submit">
</form>
<script>
    var form = document.forms[0];
    form.addEventListener('submit',function(event){
        // 實現表單驗證
        var kuang = document.getElementById('kuang');
        var kuangValue = kuang.value;
        if (kuangValue === '' || kuangValue === undefined || kuangValue === null) {
            console.log('xxxxxx');
            // 阻止默認行爲
            event.preventDefault();
        }
    });
</script>
</body>

submit()方法

該方法可用於提交表單
- 能夠使用任何一個按鈕進行表單提交(不須要提交按鈕)

<body>
<form action="#">
    <input type="text" id=kuang">
    <input id="btn" type="button" value="提交">
</form>
<script>
    var btn = document.getElementById('btn');
    btn.addEventListener('click',function(){
        var form = document.forms[0];
        form.submit();
    });
</script>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。