js高级程序设计（表单部分小结）

1.html5中的input和react组件中的Input的change事件的区别

在使用react开发时，我们对于form组件的大多时间处理都是用哪个onChange事件去处理，它只需要改变输入框的值或者单选框、复选框的值即可触发。

而在h5的原生input输入框中，则是输入框的值改变，并且要失去焦点才可以。这种触发的方式仅限于输入框，对于select这种下拉列表，则是和react一样，只要值改变就会触发。

扩展：对于input和textarea的这两个输入域，在属性上是有差别的。相较于input的value和size属性，textarea在标记中是没有这两个属性的，但是这两者的值都存在value属性中，换句话说要想操作textarea的值不要直接操作DOM，这样会有风险，可能操作的value值不会显示在页面上，但是可以像下面这样去设置，保证一定正确。

// 对于textarea的标记中的错误写法，对于而言容易出错的地方

// 正确写法
initial value

// 由于他们的值都保存在value属性中，可以这样设置，针对textarea而言，避免出错
const textBox = document.getElementsByTagName("textarea")[0]; // 获取一个NodeList列表
// 对textarea进行获取值和设置值
console.log(textBox.value); // initial value
textBox.value = "new value";

2.h5标准中为输入域新增加的标准方法和属性

（1）取得输入框中选择的文本

const textBox = document.getElementsByTagName("textarea")[0];
// 输入框的两个新属性sectionStart，sectionEnd即选择的范围
const textBoxSelectValue = textBox.value.substring(textBox.sectionStart, textBox.sectionEnd);

（2）选择输入框的部分文本

const textBox = document.getElementsByTagName("textarea")[0];
textBox.value = "hello world";
// 参数类似substring()中的两个参数，左闭右开
textBox.setSectionRange(0, textBox.value.length);

（3）复制、剪切、粘贴事件

const textBox = document.getElementsByTagName("textarea")[0];
// 复制事件
textBox.oncopy = function() {};
// 剪切事件
textBox.oncut = function() {};
// 粘贴事件
textBox.onpaste = function(e) {
  // 获取剪切板的额内容,它的用处主要是将输入框的值剪切并复制到另一个输入框，进行输入值的校验，感觉还是挺有意思的
  const text = e.getClipboardText();
  // 判断输入框不能为数字和空值
  if (!/^\d*$/.test(text)) {
    // 进行粘贴时的输入校验
  }
};

（4）对表单的所有校验可以使用checkValidity()方法,这个方法可以用在单一的输入框，也可以用在form表单元素上，如果对form表单不想在提交的时候验证字段的值的有效性，则可以在给form添加一个novalidate属性。假如有多个提交按钮，可以指定给哪一个按钮添加不必要校验属性（formnovalidate）,这样在提交表单时也不会进行校验。

注意：form的非校验属性是novalidate，而提交按钮的非校验属性是formnovalidate。

      /*这里是插入的表单元素*/
  
      

// 如果form表单的所有字段的值都有效，就会返回true,在提交表单时可以使用一下，返回false，阻止默认提交
const form = document.forms[0];
form.checkValidity();

3.对select元素的深入认识

对于select元素，大都是直接操作选项，并对选中选项时触发一系列的事件处理操作。但是除此之外，它还有下面这些标准方法。

（1）add(newOption, relOption)

这个方法主要是对select下拉列表添加一条option选项，第一个参数是新添加的option元素，第二个参数则是options的相关项

const selectEle = document.getElementById("mySelect");
const optionEle = document.createElement("option");
// option的两个使用两个最多的属性
optionEle.text = "Kiwi";
optionEle.value = "KiWi";
// 将新建的option选项添加在select的第一个元素节点处
selectEle.add(optionEle, selectEle[0]);

（2）emove()

该方法主要是移除给定位置的选项。

const selectEle = document.getElementById("mySelect");
// 移除选项列表的第一个元素节点
selectEle.remove(0);

注意：如果option没有value属性值，则选中该项时，value的值会被默认置为文本值，如果option的value为空字符串，选中该项时，则显示为空字符串。

（3）对于取得select的options元素可以通过select的options属性获取到选项的列表，而不是传统操作DOM的方式取值。

  china    
      america
  japan

// 获取option列表
const selectEle = document.querySelector("select");
const selectOpt = selectEle.options;
// option的常用属性index、value、text、selected、label
console.log(selectOpt[0].value); // china
const optiontEle = document.querySelector(".selectedOption");
console.log(optiontEle.index); // 1，获取当前选项在options集合中的索引
console.log(optiontEle.value); // ""
console.log(optiontEle.text); // america
console.log(optiontEle.selected); // true
console.log(optiontEle.label); // undefined

以上是在以前的学习中没有涉及到或者了解尚浅的点，总结出来，算是给自己加深理解。