ホームページ > 記事 > ウェブフロントエンド > JavaScript での DOM フォーム操作 (コード付き)

JavaScript での DOM フォーム操作 (コード付き)

不言オリジナル: 2018-09-04 10:00:261589ブラウズ

DOM上のフォームに対してどのような操作が可能で、どのような操作方法があるのでしょうか？この記事では JavaScript での DOM フォーム操作について説明します。内容は非常に詳しいので見てみましょう。

1. フォームを取得します

フォーム要素を取得します

現在の HTML ページのすべてのフォームコレクションを取得するには、Document オブジェクトの form 属性を使用します
のフォームの name 属性値を使用しますDocument オブジェクトを使用してテーブル要素要素を取得します

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

テキスト内容を設定します

setSelectionRange()メソッドが新たに追加されましたHTML5 でフォーカスされたテキストボックスのテキストコンテンツを取得します

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>

クリップボードを操作します

コピー、カット、ペーストを使用してクリップボードのコピー、カットアンドペースト操作を設定します

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

ドロップダウンの操作list

は、selectオブジェクトとoptionオブジェクトで作成され、いくつかのプロパティとメソッドを提供します

<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()を使用します。そうでない場合は false を返します。 setCustomValidity(message) を使用すると、要素のエラーメッセージがカスタマイズされ、要素は無効ではなく、

<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 を使用してフォームを送信します

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

JavaScript での DOM フォーム操作 (コード付き)

関連記事