初步瞭解表單操做

時間 2019-12-10

標籤初步瞭解表單欄目 HTML 简体版

原文原文鏈接

表單操做

獲取表單

獲取表單元素

獲取表單元素的方式，大致上能夠分爲如下幾種方式：
1.Document對象提供的定位頁面元素的一系列方法html

<form id='myform' name='myform' class='login' action='#'></form>
<script>
 var formId=document.getElementById('myform');
 var formName=document.getElementsByName('myform');
 var formClass=document.getElementsByClassName('login')[0];
 var formElement=document.getElementsByTagName('form')[0];
 var formId2=document.querySelector('#myform');
 var formElement2=document.querySelectorAll('form')[0];
</script>

2.Document對象提供了forms屬性
該屬性用於獲取當前HTML頁面中全部的表單的集合，返回HTMLCollection對象，該對象封裝了當前HTML頁面中的全部表單對象。
示例代碼以下：瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>獲取表單元素</title>
</head>
<body>
<form action="#">
    <input type="submit">
</form>
<form name="myform" action="#">
    <input type="submit">
</form>
<script>
    //獲取當前HTML頁面中全部的表單元素
    console.log(document.forms);
    //document.表單名稱-有些新版本的瀏覽器不支持
    console .log(document.myform);

</script>
</body>
</html>

獲取表單組件元素

HTMLFormElement對象的elements屬性
該屬性用於獲取指定表單的全部組件的集合。code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>獲取表單組件元素</title>
</head>
<body>
<form action="#">
    <input type="text" name="username">
    <input type="submit">
</form>
<script>
    var form = document.forms[0];
    console.log(form.elements);

</script>
</body>
</html>

表單操做

文本內容的選擇

HTMLInputElement對象和HTMLTextAreaElement對象都提供了select（）方法，該方法用於選擇當前文本框的全部文本內容。orm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本內容的選擇</title>
</head>
<body>
<form action="#">
    <input type="text" id="username" value="請輸入你的用戶名">
    <input type="submit">
</form>
<script>
    // HTMLInputElement對象
    var username = document.getElementById('username');
    // 綁定獲取焦點(focus)事件 - 失去焦點(blur)事件
    username.addEventListener('focus',function(){
        // select()方法 - 選擇當前輸入框中的全部文本內容(全選)
        // username.select();
    });
    /*
        select事件
        * 只要選擇對應元素的文本內容時被觸發
          * select()方法
      */
    username.addEventListener('select',function(){
        /*
            HTMLInputElement對象
            * selectionStart - 表示用戶選中文本內容的開始索引值
            * selectionEnd - 表示用戶選中文本內容的結束索引值的下一個值
         */
        console.log(username.selectionStart,username.selectionEnd);

        var value = username.getAttribute('value');
        var result = value.substring(username.selectionStart,username.selectionEnd);
        console.log(result);
    });

</script>
</body>
</html>

相關標籤/搜索

每日一句

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