阅读 852

表单事件

最近学习vue的表单事件时,学习到相关的表单事件,这一块比较薄弱,没什么了解,所以写一篇博客记录一下

什么是表单

表单实际上就是form包裹input、select、textarea等标签,一般来说我们会使用一个button标签,当点击button时,就会触发form提交事件。button的完整写法为

<button type="submit"></buttton>
复制代码

表单提交往往会有个默认刷新行为,一般我们都会使用e.preventDefault取消。

input事件

当input、select、texttarea的值发生变化时,就会触发input事件。它的特点是,操作一次就会触发一次。

<input id="ipt" type="text">
复制代码
ipt.addEventListener('input',()=>{
  console.log('触发了input事件')
})
复制代码

上面的代码,每一次对text进行修改,就会触发input事件,执行回调函数。

<select name="" id="ipt">
  <option value="1">选项一</option>
  <option value="2">选项二</option>
</select>
复制代码
ipt.addEventListener('input',()=>{
  console.log('触发了input事件')
})
复制代码

上面的select标签同理,每次选择不同的选项,也会触发input事件,可以说input是范围比较大的表单事件,包含的内容很多,而且特点是变化后立即发生。

select事件

select是选中文本事件,当我们在input内选中文本时,会触发这个事件,可以通过e.target中的value属性拿到选中的文本

<input id="ipt" type="text">
复制代码
ipt.addEventListener('select',(e)=>{
  console.dir(e.target.value)
})
复制代码

上面的代码直接打出了选中的文本。

change 事件

上面的input事件的特点我们已经知道了,虽然input事件非常好,但是有时候过于频繁的触发机制不太符合需求,所以我们需要用到change事件,它的特点就是值修改完成后才会触发。

对于select标签来说,change事件基本跟input是一样的,但是input有明显的特别之处,例如

<input id="ipt" type="text">
复制代码
ipt.addEventListener('change',()=>{
  console.log('触发了change事件')
})
复制代码

只有值完成改变并且失去焦点的时候才会触发这个事件

invalid 事件

当表单提交时,如果表单的值不满足条件,那么就会触发invalid事件。

<form>
  <input type="text" required oninvalid="console.log('invalid input')" />
  <button type="submit">提交</button>
</form>
复制代码

上面的代码中,由于表单是必填的,当用户未填写完成但是点击提交时,就会触发invalid事件

form表单事件

reset 事件

reset事件当表单重置(所有表单成员变回默认值)时触发。

submit 事件

submit事件当表单数据向服务器提交时触发。注意,submit事件的发生对象是

元素,而不是元素,因为提交的是表单,而不是按钮。

inputEvent 事件对象

e.data

这个接口返回的是变动的内容。

<input type="text" id="ipt">
复制代码
ipt.addEventListener('input',(e)=>{
  console.log(e.data)
})
复制代码

上面的代码会返回变动的文本内容,例如,在文本框中输入1,就会打印1,再输入2,就会打印2,如果此时删除,那么会返回null

e.inputType

这个接口用于输入的类型,包括以下内容:

  • 手动插入文本 insertText
  • 粘贴插入文本 insertFromPaste
  • 向后删除 deleteContentBackward
  • 向前删除 deleteContentForward

e.target.value

可以获取到输入的内容文本

文章分类
前端
文章标签