• form表单


    1. 提交标签button也行(在form里面)
      <button type="submit">我是提交</button>
      <button type="reset">我是重置</button>
    2. 获取表单的四种方式
      <form action="" id="a" name="form1">
          <input type="text"  value="123465">
      </form>
      <script>
          
          let forms=document.forms;
          console.log(document.querySelector('form'));
          console.log(forms[0]);
          console.log(forms['a']);
          console.log(forms['form1']);
      </script>
    3. 获取表单元素
      <form id="from1" name="a" action="">
          <input type="text" size="5"   maxlength="10">
          <input type="radio" name="danxuan">
          <input type="radio" disabled name="danxuan">
          <input type="radio" name="danxuan">
          <input type="submit">
      </form>
      console.log(document.forms[0].elements[2])//获取一个dom
      console.log(document.forms[0].elements.danxuan)//获取单选dom集合


    4. 文本输入框input type=text ;teaxtarea
      forms[0].elements[0].select();文本选择 (只能在同一时刻选择一处文本)
      获取选择的文本内容
      forms[0].elements[1].select(); let ele=forms[0].elements[1]; console.log( ele.selectionStart);//开始选择位置 console.log( ele.selectionEnd);//结束选择位置 console.log(ele.value.slice(ele.selectionStart,ele.selectionEnd))
      forms[0].elements[1].focus();
      forms[0].elements[1].setSelectionRange(1,6);//设置选择的位置(但是没有选中的状态)这句之前必须先表单选中
    5. 输入过滤与复制相关事件
      let inp=document.querySelector('input');
          inp.onkeypress=function (e) {
              /*
              可扩展成只能输入数字
              * */
              // e.preventDefault();//阻止用户输入
              console.log(1)
          }
          /*
          *文本框复制粘贴相关
          *
          * */
          inp.onselect=function(){
            console.log('选择时')
          };
          inp.onbeforecopy=function () {
              console.log('复制之前');
          };
          inp.oncopy=function () {
              console.log('复制时');
          }
          inp.onbeforecut=function () {
              console.log('剪切前');
          }
          inp.oncut=function () {
              console.log('剪切后');
          }
          inp.onbeforepaste=function () {
              console.log('粘贴前');
          }
          inp.onpaste=function () {
              console.log('粘贴时');
          }
    6. H5表单验证
      <input type="text" maxlength="3" required> //必填
       <input type="text" maxlength="4" pattern="add"> //pattern=正则验证规则
  • 相关阅读:
    linux 重定向命令
    G++依赖安装顺序
    SQL*Plus Error Messages
    理解 chroot
    CRM的基本功能有哪些?
    GCC依赖安装顺序
    RHEL6.3 安装GCC 记录
    python requests模块http请求
    安装paramiko模块
    python执行系统命令的方法:os.system(), os.popen(), subprocess.Popen()
  • 原文地址:https://www.cnblogs.com/aqigogogo/p/10119179.html
Copyright © 2020-2023  润新知