输入框禁用首字符为空格的功能在安卓端Chrome/应用中不生效怎么办

失效原因 #

原代码依赖keydown事件与evt.which判断空格输入，安卓端Chrome存在两个核心问题：

• 软键盘输入空格时，多数场景不会返回正确的32键值，甚至不会触发keydown事件
• 输入法联想输入、语音输入、粘贴等场景完全不触发keydown事件，拦截逻辑自然失效

可行解决方案 #

推荐使用兼容性更强的input事件实时校验，覆盖所有输入场景，包括软键盘、粘贴、语音输入等：

const inputEl = document.getElementById('firstname');
inputEl.addEventListener('input', function() {
  // 直接移除开头的所有空格，不管是输入还是粘贴进来的都能处理
  this.value = this.value.replace(/^\s+/, '');
});

如果需要兼顾输入体验，同时拦截输入时的空格触发（避免字符闪一下再消失），可以组合beforeinput事件做前置拦截，安卓Chrome从60版本开始已经支持该事件：

const inputEl = document.getElementById('firstname');
// 前置拦截空值状态下的空格输入，减少输入时的字符闪动
inputEl.addEventListener('beforeinput', function(evt) {
  if (this.value.length === 0 && evt.data === ' ') {
    evt.preventDefault();
  }
});
// 兜底处理所有场景下的首空格，比如粘贴多个空格、删除前面内容后剩下首空格的情况
inputEl.addEventListener('input', function() {
  this.value = this.value.replace(/^\s+/, '');
});

注意：如果需要同时限制用户把光标移动到已有内容最前面输入空格，只需要把beforeinput的判断条件改成evt.getTargetRanges()[0].startOffset === 0 && evt.data === ' '即可。

内容的提问来源于stack exchange，提问作者DNa