DOM 中的表单操作这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战 DOM中的表单操作

这是我参与11月更文挑战的第21天，活动详情查看：2021最后一次更文挑战

表单操作

1、文本框的操作

input 元素对应DOM中的对象是HTMLInputElement对象，而 textarea 元素对应DOM中的对象是HTMLTextAreaElement对象。

HTMLInputElement对象和HTMLTextAreaElement对象的共同父级对象是HTMLElement对象。所以，这两个对象在很多操作上是比较相似的。

2、文本内容的选择

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');
        // select()方法 —— 选择当前页面 输入框中的所有文本内容
        username.select();
</script>
</body>
</html>

效果图：

select事件

select()方法对应着select事件。也就是说，当调用select()方法时，会触发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 () {
        console.log('所有内容已选择');
    });
</script>
</body>
</html>

效果图：

3、获取选择的文本内容

select 事件只是让我们知道用户在什么时候选择了指定文本框的文本内容，但并不能让我们知道用户选择了什么文本内容。

HTML5新版本中通过新增两个属性来解决用户选择了什么文本内容的问题。

selectionStart属性：选择文本内容的开始索引值。
selectionEnd属性：选择文本内容的结束索引值。

注意：IE 8及之前版本的浏览器并不支持上述两个属性，而是提供了document.selection对象，用于保存整个HTML页面文档范围内选择的文本内容。

<!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');
   /*
        HTMLInputElement对象
        * selectionStart —— 表示用户选中文本内容的开始索引值
        * selectionEnd —— 表示用户选中文本内容的结束索引值的下一个值
    */
    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>
</html>

效果图如下所示：

4、设置部分的文本内容

HTML5新版本中提供了setSelectionRange()方法，该方法用于设置一个获取焦点的文本框中选择指定的文本内容。

inputElement.setSelectionRange(selectionStart, selectionEnd,[optional] selectionDirection);

上述语法中参数说明如下：

selectionStart：被选中的第一个字符的位置。
selectionEnd：被选中的最后一个字符的下一个位置。
selectionDirection：一个被指明选择方向的字符串。有“forword”、“backward”和“none”3个可选值，分别表示“从前往后”，“从后往前”和“选择方向未知或不重要”。

注意：IE 8以及之前版本的浏览器不支持这个方法。

<!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>
    var form = document.forms[0];
    var username = form.elements[0];
    username.addEventListener('focus',function () {
       /*
        setSelectionRange()方法
        * 作用 —— 设置选择的文本内容
        *注意
            * 焦点在文本内容的最后面 等同于 select()方法（全选）
            * 焦点在设置文本内容的范围内有效
        */
        username.setSelectionRange(0,5);
    });
</script>
</body>
</html>