如何实现只能输入纯数字的HTML输入框

在Web开发中，我们经常需要限制用户只能输入数字。以下是实现方法：

1. 基础数字输入框

<input type="number" min="0" step="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');">

2. 自动换行实现

为输入框添加CSS样式实现自动换行：

<style>
  .number-input {
    white-space: pre-wrap;
    word-wrap: break-word;
    height: auto;
  }
</style>

3. 去除尾数0的JavaScript实现

function removeTrailingZeros(value) {
  return value.toString().replace(/(\.\d*?[1-9])0+$|\..0+$/, '$1');
}

document.querySelector('input').addEventListener('blur', function() {
  this.value = removeTrailingZeros(this.value);
});

4. 完整实现代码

<input 
  type="number" 
  class="number-input"
  min="0" 
  step="1" 
  oninput="this.value=this.value.replace(/[^0-9]/g,'');"
  onblur="this.value=removeTrailingZeros(this.value)"
>

5. 兼容性考虑

• 移动端适配：添加inputmode="numeric"属性
• IE兼容：使用onkeypress事件替代oninput
• 样式增强：添加padding和border美化输入框

通过以上方法，您可以轻松创建一个符合需求的数字输入框，既保证了用户体验，又确保了数据格式的正确性。