📌  相关文章
📜  HTML | DOM InputEvent inputType 属性(1)

📅  最后修改于: 2023-12-03 14:41:48.044000             🧑  作者: Mango

HTML | DOM InputEvent inputType 属性

简介

inputType 属性是在输入事件对象 InputEvent 中的一个属性，用于获取输入事件的类型。它指示了触发该事件的具体输入类型，例如文本输入、复制粘贴、撤销重做等操作。

语法
event.inputType
值

inputType 属性的值是一个字符串，表示触发输入事件的类型。可能的值包括：

  • "insertText": 当用户键入文字时触发。
  • "deleteContentBackward": 当用户按下删除键（后退键）或使用其他方式删除文本时触发。
  • "deleteContentForward": 当用户按下删除键（前进键）或使用其他方式删除文本时触发。
  • "insertReplacementText": 当用户输入替换文本时触发，例如在输入法中选择不同的候选项。
  • "insertLineBreak": 当用户插入分隔符（换行符）时触发。
  • "insertParagraph": 当用户插入段落分隔符时触发。
  • "insertFromYank": 当用户使用剪切板粘贴文本时触发。
  • "insertCompositionText": 当用户在输入法中输入组合文本时触发。
  • "insertLink": 当用户插入链接时触发。
  • "insertReplacementLink": 当有替换链接时触发。
  • "deleteByCut": 当用户使用剪切操作删除文本时触发。
  • "deleteByDrag": 当用户使用拖拽操作删除文本时触发。
  • "historyUndo": 当用户执行撤销操作时触发。
  • "historyRedo": 当用户执行重做操作时触发。
  • "formatBold": 当用户应用粗体格式时触发。
  • "formatItalic": 当用户应用斜体格式时触发。
  • "formatUnderline": 当用户应用下划线格式时触发。
  • "formatStrikeThrough": 当用户应用删除线格式时触发。
  • "formatSuperscript": 当用户应用上标格式时触发。
  • "formatSubscript": 当用户应用下标格式时触发。
示例
<!DOCTYPE html>
<html>
<body>

<input type="text" id="myInput" value="Hello World">

<script>
document.getElementById("myInput").addEventListener("input", function(event) {
  console.log(event.inputType);  // 打印当前输入事件的类型
});
</script>

</body>
</html>

上述代码中，当用户在文本框中进行各种输入操作时，输入事件将被触发，并将事件对象作为参数传递给事件处理函数。通过读取 inputType 属性，我们可以判断输入事件的具体类型。

以上就是关于 inputType 属性的介绍。根据不同的输入类型，我们可以采取不同的操作响应策略，以提供更好的用户体验。请注意，该属性在部分浏览器中可能不被支持，所以在使用时应进行兼容性考虑。