初步瞭解表單操作

老闆便宜一點唄發表於2019-02-16

表單操作

獲取表單

獲取表單元素

獲取表單元素的方式，大體上可以分為以下幾種方式：
1.Document物件提供的定位頁面元素的一系列方法

<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屬性
該屬性用於獲取指定表單的所有元件的集合。

<!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（）方法，該方法用於選擇當前文字框的所有文字內容。

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

相關文章