【JavaScript】DOM之表單操做

時間 2019-12-12

原文原文鏈接

DOM瀏覽器

表單操做code

1.獲取表單

獲取表單元素

以Document對象中forms屬性來獲取當前HTML頁面全部表單集合
以Document對象中表單的name屬性值來獲取表單元元素orm

<body>
<form action="#">
    <input type="submit">
</form>
<form name="mylove" action="#">
    <input type="submit">
</form>
<script>
    console.log(document.forms);
//    獲取當前HTML頁面全部表單元素
    console.log(document.mylove);
//    document表單名稱-有些新瀏覽器是不支持
</script>
</body>

獲取表單組件元素

以HTMLFormElement對象的elements屬性來獲取表單組件的集合對象

<body>
<form action="#">
    <input type="text" name="username">
    <input type="submit">
</form>
<script>
    var form = document.forms[0];
    console.log(form.elements);
</script>
</body>

2.表單操做

文本內容的選擇

以HTMLElement對象和HTMLTextAreaElement對象中select()方法來獲取文本框全部文本框的內容索引

<body>
<form action="#">
    <input type="text" id="username" value="請輸入你用戶名">
    <!---->
    <input type="submit">
    <!--定義提交按鈕-->
</form>
<script>
    var username = document.getElementById(username);
//    獲取ID屬性
    username.addEventListener('focus',function(){
        username.select();
    })
    username.addEventListener('select',function () {
        console.log(username.selectionStart.username.selectionEnd);
        var value = username.getAttribute('value');
        var result = value.substring(username.selectionStart,username.selectionEnd);
        console.log(result);
    })

</script>
</body>

設置文本內容

在HTML5新增中setSelectionRange()方法，來獲取一個焦點文本框的文本內容事件

body>
<form action="#">
    <input type="text" id="username" value="請輸入你用戶名">
    <!---->
    <input type="submit">
    <!--定義提交按鈕-->
</form>
<script>
    var username = document.getElementById(username);
//    獲取ID屬性
    username.addEventListener('focus',function(){
        username.select();
    })
    username.addEventListener('select',function () {
        console.log(username.selectionStart.username.selectionEnd);
        var value = username.getAttribute('value');
        var result = value.substring(username.selectionStart,username.selectionEnd);
        console.log(result);
    })

</script>
</body>

操做剪切板

以copy；cut，paste 來設置操做剪切板的複製，剪切和粘貼ip

<body>
<form action="#">
    <input type="text" id="username" value="請輸入你用戶名">
    <input type="text" id="username1">
    <input type="submit">
</form>
<script>
    var username = document.getElementById('username');
    username.addEventListener('copy',function (event) {
        var data = event.clipboardData || window.clipboardData;
        console.log(data);
        console.log('這是複製操做');
        var value = username.value;
        var result = value.substring(selectionStart,username.selectionEnd);
        console.log(result);
        data.setData('text',result);
    });
    username.addEventListener('cut',function () {
        console.log('這是個剪切操做');
    });
    var username1 = document.getElementById('username1');
    username1.addEventListener('paste',function (event) {
        event.preventDefault();
        var data = event.clipboardData || window.clipboardData;
        var result = data.getData('text');
        /*獲得DataTransfer對象
        * geData()方法-獲取數據內容*/

        if (result === '用戶名') {
            result ='***';
        }
        username1.value = result;
    })
</script>
</body>

下拉列表的操做

是以select和option對象來建立病提供一些屬性和方法element

<form action="#">
    <select id="yx">
        <option id="dj" value="dj">單機</option>
        <option value="wy">網頁</option>
        <option value="dy">端遊</option>
    </select>
    <select id="cyx1" multiple size="5">
        <option value="dj">單機</option>
        <option value="wy">網頁</option>
        <option value="dy">端遊</option>
    </select>
</form>
<script>

    var yx = document.getElementById('yx');
    // HTMLSelectElement對象
    console.log(yx.length);
    console.log(yx.options);
    console.log(yx.selectedIndex);// 被選中<option>的索引值
    // 屬性
    var yx1 = document.getElementById('yx1');
    // size屬性默認值是 0
    console.log(yx1.size);

    console.log(yx1.item(1));
    yx1.remove(2);

    var dj = document.getElementById('dj');
    console.log(dj.index);
    console.log(dj.selected);
    console.log(dj.text);
    console.log(dj.value);

</script>

3.表單驗證

以checkValidity()如元素值不存在驗證問題，會是true，如不是則返回false
以setCustomValidity（message）會爲元素自定義個錯誤信息，若是設置了，該元素未無效，並顯示rem

<body>
<form action="#">
    <input type="text" id="username">
    <input type="submit">
</form>
<script>
    var username = document.getElementById('username');
    username.addEventListener('blur',function () {
        var value = username.value;
        if (value === '' || value === undefined || vaiue === null) {
            console.log('請輸入你用戶名');
        }
    });
</script>
</body>

4.表單提交

submit事件

以submit表示提交表單get

<body>
<form action="#">
    <input type="text" id="username">
    <input type="submit">
</form>
<script>
    var form = document.forms[0];
    form.addEventListener('submit',function (event) {
        console.log('該表單已被提交');
    });
</script>
</body>

submit(）方法

以submit表示提交表單，並用使用任意普通按鈕便可完成提交

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

相關標籤/搜索

每日一句

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