14表单操作

Dreamy.TZK

发布于 2020-05-15 13:16:30

3480

发布于 2020-05-15 13:16:30

文章被收录于专栏：小康的自留地小康的自留地

表单操作

获取表单

获取表单元素

通过常规方式 Document对象方式。document.getElementById('form')等。
通过Document的属性forms ``document.forms` 返回结果为HTMLCollection。
通过表单的name名字。此方法不推荐。因为在新版本的浏览器中可能不再支持。如果返回结果为一个时类型为对象，多个时是集合。

获取表单组件元素

常规方式 Document对象方式。document.getElementById('form_input')等。
通过表单元素的属性elements var f = document.forms[0] console.log(f.elements)

表单操作

文本框的操作

选择当前文本框的所有内容

<form action="#" id="myform">
    <input type="text" id="username" name="username" value="请输入用户名">
</form>
<script>
    var username = document.getElementById('username')
    username.select()
</script>

select事件简单来说就是当被选择时的触发的事件

<form action="#" id="myform">
    <input type="text" id="username" name="username" value="请输入用户名">
</form>
<script>
    var username = document.getElementById('username')
    username.addEventListener('select', function () {
        console.log('select')
    })
</script>

获取选择的文本内容
- selectionStart 选择文本内容的开始索引值
- selectionEnd 选择文本内容的结束索引值

<form action="#" id="myform">
    <input type="text" id="username" name="username" value="请输入用户名">
</form>
<script>
    var username = document.getElementById('username')
    username.addEventListener('select', function () {
        console.log('select')
    })
</script>

设置文本内容
- setSelectionRange(start,end,[opt]) 参数分别为开始位置，结束位置和方向（forward、backward、none，分别表示从前往后，从后往前，选择方向位置或不重要）。

<form action="#" id="myform">
    <input type="text" id="username" name="username" value="请输入用户名">
</form>
<script>
    var username = document.getElementById('username')
    username.addEventListener('select', function () {
        console.log('select')
    })
</script>