14表单操作

表单操作

获取表单

获取表单元素

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

获取表单组件元素

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

表单操作

文本框的操作

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

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

代码语言：javascript复制

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

表单验证

表单提交

document form forms getelementbyid 表单

1 人点赞