如何实现文本框输入实时替换为0/1序列 无原输入字符可见延迟

原有方案缺陷原因 #

• 原生beforeinput监听逻辑未拦截默认行为，也未读取事件携带的待插入数据：事件触发时本次输入的字符还未被浏览器写入输入框value，直接替换现有value必然会遗漏最后一次输入的内容。
• 基于keydown的监听时机过早：事件触发时浏览器还未执行字符插入流程，提前修改value后，浏览器仍会将原始字符插入输入框，必然出现原始字符闪烁的问题。

实现代码 #

核心思路是在原始内容被渲染前直接拦截插入行为，全程不让原始字符进入输入框value，从根源避免闪烁：

• 只拦截内容插入类操作（普通键入、粘贴、拖拽插入、输入法组合输入），删除、光标移动等常规编辑操作直接放行，不破坏原生交互体验。
• 通过事件对象的data属性获取本次待插入的文本长度，每个输入位对应生成1位0或1的随机数。
• 手动处理光标插入位置，支持在文本任意位置插入内容，符合用户日常输入习惯。

const textbox = document.getElementById('your-textbox-id');
// 生成0/1随机字符
const findRandom = () => Math.random() < 0.5 ? '0' : '1';

textbox.addEventListener('beforeinput', (e) => {
  // 匹配所有内容插入类操作类型
  const insertEventTypes = [
    'insertText',
    'insertFromPaste',
    'insertFromDrop',
    'insertCompositionText'
  ];
  // 非插入类操作直接放行
  if (!insertEventTypes.includes(e.inputType)) return;

  // 拦截浏览器默认的原始字符插入行为，阻止原始字符渲染
  e.preventDefault();

  // 按本次插入的字符长度生成对应位数的0/1串
  const insertTextLength = e.data?.length || 0;
  let randomBinaryStr = '';
  for (let i = 0; i < insertTextLength; i++) {
    randomBinaryStr += findRandom();
  }

  // 处理光标位置，支持文本中间插入场景
  const cursorStart = textbox.selectionStart;
  const cursorEnd = textbox.selectionEnd;
  // 拼接新的输入框值
  textbox.value = textbox.value.slice(0, cursorStart) 
    + randomBinaryStr 
    + textbox.value.slice(cursorEnd);
  // 光标移动到插入内容末尾，对齐原生输入体验
  textbox.selectionStart = textbox.selectionEnd = cursorStart + insertTextLength;
}, false);

效果说明 #

该方案下原始输入字符永远不会被写入输入框value，也不会被渲染到页面，用户触发输入动作后看到的直接是生成的0/1数字串，完全看不到原始输入内容，不存在漏字符、延迟闪烁问题，同时兼容粘贴长文本、中文输入法输入、选中文本替换等所有常规输入场景。

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