初步了解表单操做

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