JavaScript点击按钮替换文本为数字输入框的方案咨询

我有如下按钮元素：

<button aria-label="Custom" aria-selected="false" class="ButtonContainer">
  <div class="DivNumContainer">
    <span class="SpanNumDisplay">Custom</span>
  </div>
</button>

希望点击该按钮时，把里面的“Custom”文本替换成下面的数字输入框：

<input
  type="number"
  pattern="[0-9]*"
  aria-describedby="error-tip"
  class="InputNum"
  value=""
>
</input>

我试了下面的脚本但没效果，求可行的解决办法：

function repFun() {
  // Creating "input" element
  var H = document.createElement('input type="number " pattern="[0-9]*" aria-describedby="error-tip" class="InputNum" value=""');

  // Creating Text node        
  var txt = document.createTextNode("");

  // Accessing  the Element we want to replace 
  var repNode = document.getElementsByClassName('.SpanNumDisplay');
        
  // Appending Text Node in Element  
  H.appendChild(txt);

  // Replacing one element with another
  repNode.replaceChild(H, repNode.childNodes[0]);
}

• document.createElement只能传标签名（比如input），不能直接写带属性的整串字符串，这么写会造出一个无效的奇怪元素
• getElementsByClassName的参数是类名本身，不需要加.，而且它返回的是元素集合，不是单个元素，没法直接调用replaceChild
• 完全没必要创建空文本节点，输入框根本不需要这个子节点

直接用下面的代码就能实现需求：

<button aria-label="Custom" aria-selected="false" class="ButtonContainer">
  <div class="DivNumContainer">
    <span class="SpanNumDisplay">Custom</span>
  </div>
</button>

<script>
// 给按钮绑定点击事件
document.querySelector('.ButtonContainer').addEventListener('click', function() {
  // 获取要替换的span元素
  const targetSpan = document.querySelector('.SpanNumDisplay');
  if (!targetSpan) return;

  // 创建输入框
  const numInput = document.createElement('input');
  // 给输入框设置属性
  numInput.type = 'number';
  numInput.pattern = '[0-9]*';
  numInput.setAttribute('aria-describedby', 'error-tip');
  numInput.className = 'InputNum';
  numInput.value = '';

  // 用输入框替换原来的span
  targetSpan.parentNode.replaceChild(numInput, targetSpan);
});
</script>

额外优化（可选） #

如果需要点击输入框外或者回车后恢复成文本展示，可以加这段逻辑：

// 点击页面其他区域时，把输入框换回文本
document.addEventListener('click', function(e) {
  const input = document.querySelector('.InputNum');
  if (input && !input.contains(e.target) && e.target.className !== 'ButtonContainer') {
    const newSpan = document.createElement('span');
    newSpan.className = 'SpanNumDisplay';
    // 显示输入的内容，没输入就回退成Custom
    newSpan.textContent = input.value.trim() || 'Custom';
    input.parentNode.replaceChild(newSpan, input);
  }
});

// 按回车键时也换回文本
document.addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    const input = document.querySelector('.InputNum');
    if (input) {
      const newSpan = document.createElement('span');
      newSpan.className = 'SpanNumDisplay';
      newSpan.textContent = input.value.trim() || 'Custom';
      input.parentNode.replaceChild(newSpan, input);
    }
  }
});

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