开端相识表单操纵

2024年2月5日 123次阅读 来源: 老板便宜一点呗

表单操纵

猎取表单

猎取表单元素

猎取表单元素的体式格局，大体上能够分为以下几种体式格局：
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>
    原文作者：老板便宜一点呗
    原文地址: https://segmentfault.com/a/1190000016256711
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞