如何在Blazor中实现TextBox输入时每4个字符自动插入空格

你可以通过监听输入事件实时处理文本内容完成需求，具体实现代码如下：

基础实现（原生JS） #

HTML 代码 #

<!-- 你的TextBox控件 -->
<input type="text" id="cardInput" placeholder="请输入内容">

JavaScript 代码 #

const inputEle = document.getElementById('cardInput');

inputEle.addEventListener('input', function(e) {
  // 先移除所有已有空格，避免重复插入
  let originValue = this.value.replace(/\s/g, '');
  // 每4个字符分割后用空格拼接
  let formattedValue = originValue.match(/.{1,4}/g)?.join(' ') || '';

  // 修正光标位置，避免处理后光标跳到文本末尾
  let cursorPosition = this.selectionStart;
  // 统计原文本光标前的空格数量
  const oldSpaceNum = (this.value.slice(0, cursorPosition).match(/\s/g) || []).length;
  // 计算新文本对应位置的空格数量
  const newSpaceNum = (formattedValue.slice(0, cursorPosition - oldSpaceNum + Math.floor((cursorPosition - oldSpaceNum)/4)).match(/\s/g) || []).length;

  this.value = formattedValue;
  // 把光标放到正确的位置
  this.selectionStart = this.selectionEnd = cursorPosition - oldSpaceNum + newSpaceNum;
})

适配双向绑定场景的注意事项 #

• 如果你用的是Vue、React等带双向绑定的框架，不要直接操作DOM的value属性，把上述处理逻辑放到对应框架的input事件回调中，直接处理绑定的变量即可，避免视图和数据不同步
• 如果需要插入的是其他分隔符（比如横线-），只需要把join(' ')中的空格替换为对应的分隔符即可
• 代码已经兼容删除、中间插入字符的场景，不会出现光标错位的问题

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