input只能输入数字

要使HTML的<input>标签只能输入数字，您可以使用以下方法：

  1. 使用type="number"属性 ：
  • 将<input>标签的type属性设置为number，这样在大多数现代浏览器中，用户只能输入数字。但是，这种方法在移动设备上可能仍然允许输入非数字字符，因为它是基于HTML5标准的，并不完全兼容所有浏览器和操作系统。
  1. 使用oninput事件和正则表达式 ：
  • 通过在<input>标签中添加oninput事件，并使用JavaScript正则表达式来替换所有非数字字符，可以确保用户只能输入数字。这种方法适用于所有浏览器，包括移动设备。

以下是具体的代码示例：

方法一：使用type="number"属性

<input type="number" />

方法二：使用oninput事件和正则表达式

<input type="text" oninput="this.value = this.value.replace(/[^0-9]/g, '')；" />

方法三：使用JavaScript函数限制输入

<input type="text" id="numberInput" />
<script>
  function checkNum(data) {
    if (data) {
      return (data = data.replace(/[^\d.%]/g, ''))；
    }
    return ''；
  }
  document.getElementById('numberInput').oninput = function() {
    this.value = checkNum(this.value)；
  }；
</script>

建议

  • 方法一 适用于需要兼容HTML4的旧浏览器，但在移动设备上可能存在问题。

  • 方法二 和 方法三 适用于所有现代浏览器，并且可以确保在移动设备上用户只能输入数字。

根据您的具体需求和目标平台，您可以选择最适合您的方法。

Top
×
×