Recently, when learning vUE’s form events, I learned related form events. This is relatively weak and I don’t know much about it, so I write a blog to record it

What is a form

A form is essentially a form wrapped around tags like input, SELECT, textarea, etc. Typically we use a button tag. When a button is clicked, the form submission event is triggered. The full form of button is

<button type="submit"></buttton>
Copy the code

Form submissions tend to have a default refresh behavior, which we usually cancel with e.preventDefault.

The input event

The input event is emitted when the values of INPUT, SELECT, and Texttarea change. The feature is that every operation will trigger once.

<input id="ipt" type="text">
Copy the code
ipt.addEventListener('input'.() = >{
  console.log('Triggered an input event')})Copy the code

The above code, each time you modify text, triggers the input event and executes the callback.

<select name="" id="ipt">
  <option value="1">Option a</option>
  <option value="2">Option 2</option>
</select>
Copy the code
ipt.addEventListener('input'.() = >{
  console.log('Triggered an input event')})Copy the code

In the same way as the select tag above, each time a different option is selected, the input event is also triggered. Input is a large form event that contains a lot of content and typically occurs immediately after the change.

The select event

Select is the selected text event, which is triggered when text is selected in the input and can be retrieved via the value property in e.target

<input id="ipt" type="text">
Copy the code
ipt.addEventListener('select'.(e) = >{
  console.dir(e.target.value)
})
Copy the code

The code above prints the selected text directly.

Change event

We already know the nature of the input event above. Although the input event is good, sometimes too frequent firing mechanism is not suitable, so we need to use the change event, which is the nature of the value is changed before firing.

For the SELECT tag, the change event is basically the same as input, but input has obvious special features, such as

<input id="ipt" type="text">
Copy the code
ipt.addEventListener('change'.() = >{
  console.log('Triggered the change event')})Copy the code

This event is emitted only if the value has changed and lost focus

Invalid event

When the form is submitted, an invalid event is emitted if the form’s values do not meet the criteria.

<form> <input type="text" required oninvalid="console.log('invalid input')" /> <button type="submit"> </button> </form>Copy the code

In the above code, because the form is mandatory, an invalid event is triggered when the user clicks Submit without completing it

Form events

Reset event

The reset event is emitted when the form resets (all form members return to their default values).

The submit event

The Submit event is triggered when form data is submitted to the server. Note that the Submit event occurs to

InputEvent Event object

e.data

This interface returns the changed content.

<input type="text" id="ipt">
Copy the code
ipt.addEventListener('input',(e)=>{
  console.log(e.data)
})
Copy the code

The code above returns the changed text content, for example, entering a 1 in the text box prints a 1, entering a 2 again prints a 2, and deleting it returns NULL

e.inputType

This interface is used for input types, including the following:

  • Insert text manuallyinsertText
  • Paste and insert textinsertFromPaste
  • Back to deletedeleteContentBackward
  • Forward to deletedeleteContentForward

e.target.value

You can get the input content text