Skip to content

Latest commit

 

History

History
51 lines (46 loc) · 1.76 KB

监听中文输入.md

File metadata and controls

51 lines (46 loc) · 1.76 KB

监听中文输入

  • compositionstart：开始输入
  • compositionupdate：每输入一个字母，触发一次
  • compositionend：结束输入

例子

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="text" id="example" name="example">
  <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea>
  <button class="clear-log">Clear</button>
</body>
<script>
  const inputElement = document.querySelector('input[type="text"]');
  const log = document.querySelector('.event-log-contents');
  const clearLog = document.querySelector('.clear-log');

  clearLog.addEventListener('click', () => {
    log.textContent = '';
  });

  function handleEvent(event) {
    log.textContent = log.textContent + `${event.type}: ${event.data || event.target.value}\n`;
  }

  inputElement.addEventListener('compositionstart', handleEvent);
  inputElement.addEventListener('compositionupdate', handleEvent);
  inputElement.addEventListener('compositionend', handleEvent);
  inputElement.addEventListener('input', handleEvent);
  inputElement.addEventListener('change', handleEvent);
</script>
</html>

触发顺序：

  1. compositionstart：识别触发中文输入
  2. compositionupdate：每输入一个字母触发
  3. input：value被修改触发
  4. 中文输入没有结束，不断循环2、3
  5. compositionend：中文输入结束
  6. change：被修改并且失焦后，但并未进行提交触发

参考

Element: compositionstart event - MDN