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

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

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

Added 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])
  }
}

CodePudding user response：

So, a few starting notes:

• Generally speaking you wouldn't use a <textarea/> for a single data point value-- you would use an <input/> or other form control. <textarea/> is usually reserved for large amounts of text data. However, as is not necessarily clear from your question, you are using it for a sort of "bulk entry" of multiple values, so for this reason it is probably acceptable.
• Some comments suggested that using type="number" is the correct move, but I would caution against jumping to that anytime the entry characters are numeric-- number inputs are specifically for when the value contained represents a quantity or otherwise numeric data point-- however, there are many other situations, such as a numeric pin or a product ID, which may be constrained to numeric characters but don't specifically represent a number
• There is a pattern attribute that you can use to specify a pattern to be adhered to for the entry; however:
  1. This is restricted to only a handful of form elements, which do not include the <textarea/>
  2. The pattern attribute doesn't actually restrict input; it merely is leveraged for native validation, which differs from your use case.

For these reasons, your best bet is, unfortunately, probably to leverage JavaScript. I would recommend running a script on every key entered to validate that it is either a numeric character or a newline, and otherwise don't write it to the <textarea/>. Given your example code is leveraging jQuery, I will do the same for my example:

$(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>

This allows you to prevent input to only numeric keys and the enter key (and delete and backspace key and arrow keys are not captured by this script, so it allows editing).

However, this does not restrict entries to six digits or less. To do that, we could try to evaluate each keypress, figure out where the cursor is, and if the resulting new value will violate our restrictions. However, this seems quite complex-- for instance, we need to manage if the user has selected a series of values to replace versus simply having a single cursor with no selection. Instead, we could cache the last value after each valid change, and then listen to all changes using .on('input', ...) and evaluate if the value is valid-- if not, we restore the last good value:

$(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>

This has the added benefit of preventing bad inputs from pasting in a value.