JavaScript 文本框字符屏蔽与剪贴板事件处理

运行以上代码会让文本框变成只读，因为所有按键都被屏蔽了。如果想只屏蔽特定字符，则需要检查事件的 charCode 属性，以确定正确的回应方式。例如，下面就是只允许输入数字的代码:

textbox.addEventListener("keypress", (event) => {
  if (!/\d/.test(String.fromCharCode(event.charCode))){
    event.preventDefault();
  }
});

这个例子先用 String.fromCharCode() 把事件的 charCode 转换为字符串，再用正则表达式 /\d/ 来测试。这个正则表达式匹配所有数字字符，如果测试失败就调用 preventDefault() 屏蔽事件默认行为。这样就可以让文本框忽略非数字输入。 虽然 keypress 事件应该只在按下字符键时才触发，但某些浏览器会在按下其他键时也触发这个事件。Firefox 和 Safari(3.1 之前) 会在按下上、下箭头键、退格键和删除键时触发 keypress 事件。Safari 3.1 及之后版本对这些键则不会再触发 keypress 事件。这意味着简单地屏蔽所有非数字字符还不够好，因为这样也屏蔽了上述这些非常有用的且必要的键。好在我们可以轻松检测到是否按下了这些键。在 Firefox 中，所有触发 keypress 事件的非字符键的 charCode 都是 0，而在 Safari 3 之前这些键的 charCode 都是 8。综合考虑这些情况，就是不能屏蔽 charCode 小于 10 的键。为此，上面的函数可以改进为:

textbox.addEventListener("keypress", (event) => {
  if (!/\d/.test(String.fromCharCode(event.charCode)) && event.charCode > 9){
    event.preventDefault();
  }
});

这个事件处理程序可以在所有浏览器中使用，屏蔽非数字字符但允许同样会触发 keypress 事件的所有基础按键。 还有一个问题需要处理：复制、粘贴及涉及 Ctrl 键的其他功能。在除 IE 外的所有浏览器中，前面代码会屏蔽快捷键 Ctrl+C、Ctrl+V 及其他使用 Ctrl 的组合键。因此，最后一项检测是确保没有按下 Ctrl 键，如下面的例子所示:

textbox.addEventListener("keypress", (event) => {
  if (!/\d/.test(String.fromCharCode(event.charCode)) && event.charCode > 9 && !event.ctrlKey){
    event.preventDefault();
  }
});

最后这个改动可以确保所有默认的文本框行为不受影响。这个技术可以用来自定义是否在文本框中输入某些字符。

2. 处理剪贴板

IE 是第一个支持剪贴板相关事件及通过 JavaScript 访问剪贴板数据的浏览器。IE 的实现成为了事实标准，这是因为 Safari、Chrome、Opera 和 Firefox 都实现了相同的事件和剪贴板访问机制，后来 HTML5 也增加了剪贴板事件。以下是与剪贴板相关的 6 个事件。

• beforecopy: 复制操作发生前触发。
• copy: 复制操作发生时触发。
• beforecut: 剪切操作发生前触发。
• cut: 剪切操作发生时触发。
• beforepaste: 粘贴操作发生前触发。
• paste: 粘贴操作发生时触发。