1.html5中的input和react组件中的Input的change事件的区别
在使用react开发时，我们对于form组件的大多时间处理都是用哪个onChange事件去处理，它只需要改变输入框的值或者单选框、复选框的值即可触发。
而在h5的原生input输入框中，则是输入框的值改变，并且要失去焦点才可以。这种触发的方式仅限于输入框，对于select这种下拉列表，则是和react一样，只要值改变就会触发。
扩展：对于input和textarea的这两个输入域，在属性上是有差别的。相较于input的value和size属性，textarea在标记中是没有这两个属性的，但是这两者的值都存在value属性中，换句话说要想操作textarea的值不要直接操作DOM，这样会有风险，可能操作的value值不会显示在页面上，但是可以像下面这样去设置，保证一定正确。
<input value="initial value" size="25" /> // 对于textarea的标记中的错误写法，对于而言容易出错的地方 <textarea value="initial value"></textarea> // 正确写法 <textarea>initial value</textarea>// 由于他们的值都保存在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> /*这里是插入的表单元素*/ <input type="submit" value="提交验证" /> <input type="submit" vaue="提交不验证" formnovalidate /> </form>// 如果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的方式取值。
<select> <option value="china">china</option> <option value="" selected class="selectedOption">america</option> <option label="japan">japan</option> </select>// 获取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
以上是在以前的学习中没有涉及到或者了解尚浅的点，总结出来，算是给自己加深理解。
网友评论