Js高级程序设计第三版学习(十四章)

                              Js高级程序设计第三版学习(十四章)

 

第十四章 表单脚本

  1.表单的基础知识:   

 获取表单有三种形式

      // 通过dom
      var form1 = document.getElementById('form1');
      //通过forms集合
      var form11 = document.forms[0];
      //通过form表单的name
      var form111 = document.form1;

      console.log((form1 == form11));//true
      console.log(form1 == form111) // true

表单元素有自己独特的元素和方法

提交交单可以使用 <input type="submit">或者<button type="submit"></button> 再提交表单的时候会触发submit事件,我们可以通过preventDefault() 来组织submit提交

重置表单可以使用 <input type="reset">或者<button type="reset"></button>, 会把表单恢复到页面刚加载的样子, 会触发reset事件

获取表单元素可以使用form.elements属性

      var form1 = document.getElementById('form1');
      var text1 = form1.elements[0];
      var text2 = form1.elements['text2']
      console.log(text1);
      console.log(text2);

共有的表单字段属性

focus()方法可以是表单元素获取焦点, blur()可以取消焦点 , 表单字段事件中 除了focus或者blur外, 还有change事件, 当input失去焦点,切value值改变时触发, select 选项改变时触发

  2.文本框脚本:    

用户输入的内容都会保存在input的value属性中, 更改value同时也会改变input显示的文本

select()方法, 调用select方法的文本框会获得焦点, 同时会选择文本框的全部文本, setSelectionRange(), 选择文本框的部分文本, 参数1 起始索引 参数2 结束索引的后一个位置, 如果要获取被选中的文本 可以使用 selectionStart (起始) 和selectionEnd(结束), 配合截取字符串.

剪切板事件: 访问clipboardData对象来获取剪切板的数据, cut(剪切事件), copy(复制), paste(粘贴), 这三个事件都是剪切板事件, 在这三个事件使用perventDefault() 可以阻止 剪切, 复制, 粘贴. clipboardData有三个方法 用来获取设置(setData), 获取(getData), 清空(clear数据), setData(), 参数1: 类型 如 text, 参数2: 添加的文本, getData(). 参数1 类型

     text2.onpaste = function(event){
       console.log(event.clipboardData.getData('text'))
     }
     text2.oncopy = function(event){
        event.clipboardData.setData('text','ppap')
        console.log(event.clipboardData.getData('text'));
     }

h5给标签设置了一些字段, 用来自动验证,  required字段 表示在表单提交时 不能为空, type类型 可以设置为 email,number, 便可自行检测邮箱或数字等,对于数值类型的标签, 可以设置 min max 最小最大数, pattern 传入正则表达式,  用来检测文本, 是否符合正则,  checkValidity() 用来检测文本是否符合日期 如果符合返回true 并接着往下执行.

     text2.onfocus = function(){
      // console.log(this.validity);
      if(text1.checkValidity()){
       console.log('ok')
      }else{
        console.log('nono')
      }
     }

validity属性, 用来告诉你, 那些字段合格,那些不合格,这个对象会详细列出

ValidityState {valueMissing: false, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …}

novalidity 字段, 告诉表单不进行验证.

  3.选择框脚本:     

 选择框由select 和option 组成的, select 提供了一些属性和方法 add() 插入 option 参数1: 插入的option 参数2 插入位置在相关项之前,为空插入最后. options 所有项集合, remove(index) 根据索引移除项 , selectedIndex 选中项索引, option 提供了 index 项在集合中的索引, text 文本, value 值 , selected 是否被选中 .

      var ss = document.getElementById('ss');
      //被选中项索引 更改selectedIndex 可以改变被选中的项
      console.log(ss.selectedIndex); //0
      ss.selectedIndex = 1;

      // 创建option text代表文本值 value代表元素值
      // select.add 方法用于添加option
      var op = document.createElement('option');
      op.text = '添加的';
      op.value = 23;
      ss.add(op)

      //移除当前被选中的索引 使用null也可以移除
      ss.remove(ss.selectedIndex)
      ss.options[0] = null;