HTMLElement: beforeinput event

The DOM beforeinput event fires when the value of an <input>, <select>, or <textarea> element is about to be modified. The event also applies to elements with contenteditable enabled, and to any element when designMode is turned on.

In the case of contenteditable and designMode, the event target is the editing host. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable.

Examples

This example logs current value of the element immediately before replacing that value with the new one applied to the <input> element.

HTML

<input placeholder="Enter some text" name="name"/>
<p id="values"></p>

JavaScript

const input = document.querySelector('input');
const log = document.getElementById('values');

input.addEventListener('beforeinput', updateValue);

function updateValue(e) {
  log.textContent = e.target.value;
}

Result

Specifications

Browser compatibility

See also

• Related event: input