我怎样才能让盒子里只能写数字？限制为 6 位数

Question

怎样才能让盒子里只能写数字？限制为 6 位数字。

<?php
$barcode_name = "Seal Number:";
$barname = "placeholder=\"Scan the Serial Number\"";
?>

<label class="control-label col-sm-4" for="barcodeno"><?php echo $barcode_name; ?></label>
  <div class="col-sm-4">
    <p class="form-control-static" style="margin-top: -6px;">
        <textarea class="form-control" rows="10" id="barcodeno" name="barcodeno" onkeydown="return KeyDown()" onkeyup="this.value=this.value.toUpperCase()" <?php echo $barname; ?>></textarea>
    </p>
  </div>
  <br>

已添加Javascript

var barcodeno = $('#barcodeno').val().trim();
barcodeno = barcodeno.split('\n');
//checking duplicate barcodeno
let barcodeno_array = []
for (let i = 0; i < barcodeno.length; i++) {
  if (barcodeno_array.indexOf(barcodeno[i]) == -1) {
    barcodeno_array.push(barcodeno[i])
  }
}

Answer 1

所以，一些开始的笔记：

通常来说，您不会对单个数据点值使用 <textarea/>——您会使用 <input/> 或其他表单控件。 <textarea/> 通常保留用于大量文本数据。但是，从您的问题中不一定清楚，您正在将它用于一种 "批量输入" 多个值，因此因此它可能是可以接受的。
一些评论建议使用 type="number" 是正确的做法，但我会警告不要在输入字符为数字的任何时候跳到那个——数字输入专门用于当包含的值表示数量或其他数字数据点——然而，还有许多其他情况，例如数字 pin 或产品 ID，可能仅限于数字字符，但并不具体表示数
有一个 pattern attribute 可以用来指定条目要遵循的模式；然而：
1. 这仅限于少数表单元素，不包括 <textarea/>
2. pattern 属性实际上并不限制输入；它仅用于本机 validation，这与您的用例不同。

由于这些原因，不幸的是，您最好的选择可能是利用 JavaScript。我会建议运行在输入的每个键上都有一个脚本来验证它是数字字符还是换行符，否则不要将它写入 <textarea/>。鉴于您的示例代码正在利用 jQuery，我将对我的示例执行相同的操作：

$(document).ready(() => {
  const pidTextarea = $('#productIds');
  const allowedChars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Enter'];
  pidTextarea.on('keypress', (e) => {
    const { key } = e;
    if (!allowedChars.includes(key)) {
      e.preventDefault();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="productIds">Product IDs (bulk input)</label>
<textarea id="productIds" name="productIds"></textarea>

这允许您防止仅输入数字键和回车键（并且删除和返回space键和箭头键不会被此脚本捕获，因此它允许编辑）。

但是，这不会将条目限制为六位或更少。为此，我们可以尝试评估每个按键，找出光标的位置，以及由此产生的新值是否会违反我们的限制。然而，这看起来相当复杂——例如，我们需要管理用户是否选择了一系列要替换的值，而不是只使用一个没有选择的光标。相反，我们可以在每次有效更改后缓存最后一个值，然后使用 .on('input', ...) 侦听所有更改并评估该值是否有效——如果无效，我们恢复最后一个有效值：

$(document).ready(() => {
  const pidTextarea = $('#productIds').eq(0);
  const allowedChars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'Enter'];
  let cachedTextAreaValue = pidTextarea.value;
  pidTextarea.on('keypress', (e) => {
    const { key } = e;
    if (!allowedChars.includes(key)) {
      e.preventDefault();
    }
  });
  pidTextarea.on('input', (e) => {
    const newValue = pidTextarea.val();
    const splitNewValue = newValue.split('\n');
    for (let i = 0; i < splitNewValue.length; i++) {
      const currentVal = splitNewValue[i];
      if (currentVal.length > 6) {
        pidTextarea.val(cachedTextAreaValue);
        return;
      }
    }
    // if we exit the for loop having not left the function we cache the new value
    cachedTextAreaValue = newValue;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="productIds">Product IDs (bulk input)</label>
<textarea id="productIds" name="productIds"></textarea>

这有一个额外的好处，可以防止错误的输入粘贴到一个值中。

注意：

Don’t hijack the keyboard. Display an error message if the characters entered aren’t numeric. – onosendi 10 hours ago

这是一个很好的观点——虽然我的 post 确实向您展示了如何实现您所要求的，但它没有做出任何判断这是否真的是一个好主意。当然有理由不限制输入，而是等到用户尝试提交表单，然后验证并显示有意义的反馈，说明可能出了什么问题。此外，您应该确保为表单控件提供明确的方向，以减少摩擦——例如，不要让用户猜测分隔符是否为新行，space , 或逗号 - 相反，在表单字段旁边提供消息。虽然这些更多的是 UX 问题而不是软件问题，但通常在构建前端时，我们还必须负责做出选择，以便为我们的用户构建最佳、最易访问的体验。对于它的价值，我发现 The Smashing Magazine publication Form Design Patterns by Adam Silver 是一个很好的声音来源，可用用户界面的合理设计模式。

我怎样才能让盒子里只能写数字？限制为 6 位数

How can I make only numbers can be written in the box? Limit is 6 digits

html

javascript

numeric