在此页

• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

这是 实验性技术
检查 浏览器兼容性表格 要小心谨慎在生产中使用这之前。

DOM beforeinput event fires when the value of an <input> , <select> ，或 <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.

冒泡	Yes
可取消	Yes
接口	InputEvent
事件处理程序特性	None
Sync / Async	Sync
Composed	Yes
默认动作	Update the DOM element

范例

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

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;
}
					

结果

规范

规范	状态
UI Events The definition of 'beforeinput event' in that specification.	工作草案

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
beforeinput event	Chrome Yes	Edge 79	Firefox No	IE No	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android No	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

另请参阅

• Related event: input

元数据

• 最后修改： Feb 22, 2020

相关话题

1. HTMLElement
2. 特性

   1. contentEditable
   2. contextMenu
   3. dir
   4. hidden
   5. innerText
   6. isContentEditable
   7. lang
   8. offsetHeight
   9. offsetLeft
   10. offsetParent
   11. offsetTop
   12. offsetWidth
   13. onabort
   14. onanimationcancel
   15. onanimationend
   16. onanimationiteration
   17. onauxclick
   18. onblur
   19. oncancel
   20. oncanplay
   21. oncanplaythrough
   22. onchange
   23. onclick
   24. onclose
   25. oncontextmenu
   26. oncopy
   27. oncuechange
   28. oncut
   29. ondblclick
   30. ondurationchange
   31. onended
   32. onerror
   33. onfocus
   34. onformdata
   35. ongotpointercapture
   36. oninput
   37. oninvalid
   38. onkeydown
   39. onkeypress
   40. onkeyup
   41. onload
   42. onloadeddata
   43. onloadedmetadata
   44. onloadend
   45. onloadstart
   46. onlostpointercapture
   47. onmousedown
   48. onmouseenter
   49. onmouseleave
   50. onmousemove
   51. onmouseout
   52. onmouseover
   53. onmouseup
   54. onpaste
   55. onpause
   56. onplay
   57. onplaying
   58. onpointercancel
   59. onpointerdown
   60. onpointerenter
   61. onpointerleave
   62. onpointermove
   63. onpointerout
   64. onpointerover
   65. onpointerup
   66. onreset
   67. onresize
   68. onscroll
   69. onselect
   70. onselectionchange
   71. onselectstart
   72. onsubmit
   73. ontouchcancel
   74. ontouchstart
   75. ontransitioncancel
   76. ontransitionend
   77. onwheel
   78. outerText
   79. title
3. 方法

   1. click()
   2. forceSpellCheck()
4. 事件

   1. animationcancel
   2. animationend
   3. animationiteration
   4. animationstart
   5. beforeinput
   6. change
   7. gotpointercapture
   8. input
   9. lostpointercapture
   10. pointercancel
   11. pointerdown
   12. pointerenter
   13. pointerleave
   14. pointermove
   15. pointerout
   16. pointerover
   17. pointerup
   18. transitioncancel
   19. transitionend
   20. transitionrun
   21. transitionstart
5. 继承：

   1. 元素
   2. 节点
   3. EventTarget