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. 选择当前文本框的所有内容
<form action="#" id="myform">
    <input type="text" id="username" name="username" value="请输入用户名">
</form>
<script>
    var username = document.getElementById('username')
    username.select()
</script>
  1. 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>
  1. 获取选择的文本内容
    • 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>
  1. 设置文本内容
    • setSelectionRange(start,end,[opt]) 参数分别为开始位置,结束位置和方向(forwardbackwardnone,分别表示从前往后,从后往前,选择方向位置或不重要)。
<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>

表单验证

表单提交

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一、MongoDB的安装

    Dreamy.TZK
  • 八、NPM包管理

    在我们的模块中定义一个对象,并将其暴露出去。接下来在我们自己的js文件中去使用这个对象。

    Dreamy.TZK
  • 一、Node.js入门

    NodeJs是一个基于谷歌V8引擎的运行环境。(服务器上的v8引擎就是node.js)

    Dreamy.TZK
  • spring boot 使用websocket

    路过君
  • 面向过程编程

    面向过程编程是解决问题的一种思想,相当于武林门派,武林门派之间没有好坏之分,因此它与我们之后学习的面向对象编程其实没有好坏之分。

    py3study
  • WriteUp分享 | LCTF的一道preg_match绕过+出题人的锅

    0x00题目 http://123.206.120.239/ idea/workspace.xml 泄露文件信息,常见于用phpstorm写项目然后同步到git...

    安恒网络空间安全讲武堂
  • 前端|HTML5中的网络存储

    随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足日益更新的需求,会经常性的在本地设备上存储数据,例如记录历史活动信息。传统方式使用...

    算法与编程之美
  • 聊聊登录那些事

    原来分享过一篇文章,Java自定义注解及应用,当时为了能突出重点,直接在url中传了用户的所属角色,并写了一般的做法。加上最近看了一些人的简历,发现神奇的相似,...

    Java识堂
  • MySQL 练习题和答案,以及运行结果截图

    RendaZhang
  • ​爬虫入门篇(上手即用)

    可以通过chrome浏览器的F12-network查看request的headers,将该网页的headers信息复制下来使用。

    星辉

扫码关注云+社区

领取腾讯云代金券