【前端】input输入框只能输入大于等于0的正数

你可以通过监听输入框的值变化，然后在输入框失去焦点时对输入的值进行验证，如果不符合条件，则清空输入框的值或者显示错误提示信息。具体实现可以参考以下代码：

HTML 代码：

<input type="text" id="num-input" placeholder="请输入大于等于0的正数">
<span id="error-msg" style="display: none; color: red;">请输入大于等于0的正数！</span>

JavaScript 代码：

const numInput = document.getElementById('num-input');
const errorMsg = document.getElementById('error-msg');

numInput.addEventListener('input', function() {
  // 只允许输入数字和小数点
  this.value = this.value.replace(/[^\d.]/g, '');
  // 限制只能输入一个小数点
  this.value = this.value.replace(/\.{2,}/g, '.');
  this.value = this.value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
});

numInput.addEventListener('blur', function() {
  const value = parseFloat(this.value);
  if (isNaN(value) || value < 0) {
    this.value = '';
    errorMsg.style.display = 'block';
  } else {
    errorMsg.style.display = 'none';
  }
});

这段代码中，我们通过给输入框添加 `input` 和 `blur` 事件监听器来处理输入和失去焦点时的逻辑。在 `input` 事件监听器中，我们使用正则表达式过滤掉非数字和小数点的字符，并且限制只能输入一个小数点。在 `blur` 事件监听器中，我们对输入的值进行验证，如果不符合条件，则清空输入框的值并显示错误提示信息。