How to limit the textarea to only hold numbers?

Profile

footer text

How to limit the textarea to only hold numbers?

I'm trying to make a date textbox on my blog, and the date is only numbers. I don't want anybody making a mistake typing a letter. Is there any way to limit the characters to only numerals? Thanks!

Comments:

2023-01-25 00:10:05

in html 5 there is a quick easy way ..<input type="number" /> will prevent from typing characters instead numbers

Answers(8) :

you need some java script to implement this

<html>
<head>
<title>Test</title>
<script language="javascript">
function checkInput(ob) {
  var invalidChars = /[^0-9]/gi
  if(invalidChars.test(ob.value)) {
            ob.value = ob.value.replace(invalidChars,"");
      }
}
</script>
</head>

<body>
    <input type="text" onkeyup="checkInput(this)"/>
</body>
</html>

Try this (utilizing jquery javascript library)

html

<input type="text" size="30" />

js (jquery library)

$(document).ready(function() {
    $("input").attr("placeholder", "Please input numbers").change(function(e) {
      var txt = /[a-z]/gi.test($(this).val());
      if (txt) {
        $(this).val("").attr("placeholder", "Not a number, please input numbers")
      };
    });
})

jsfiddle http://jsfiddle.net/guest271314/v2BRY/

Edit. Not certain if element is input ot textarea, hope should work for either.

javascript, without utilizing jquery javascript library

html

<input type="text" size="30" />

javascript

function checkText() {   
  var textarea = document.querySelectorAll("input");
  textarea[0].setAttribute("placeholder", "Please input numbers");    
  textarea[0].addEventListener("change", function(e) {
    var txt = /[a-z]/gi.test(e.target.value);
    if (txt) {
      e.target.value = "";
      e.target.setAttribute("placeholder", "Not a number, please input numbers");
    };    
  }, false);
};
checkText()

jsfiddle http://jsfiddle.net/guest271314/pFu4K/

Hope this helps

Comments:

2023-01-25 00:10:05

This answer assumes you are using jQuery

2023-01-25 00:10:05

@antlersoft Edited post to include "utilizing jquery javascript library". jquery not needed to meet requirement, just sharing a potential option. Thanks.

2023-01-25 00:10:05

@antlersoft Please see post edit option at "javascript, without utilizing jquery javascript library". Just sharing potential or possible options. Thanks, again.

If you use jQuery, you can do it like in this jsfiddle

$('input').keypress(function(e) {
    var a = [];
    var k = e.which;

    for (i = 48; i < 58; i++)
        a.push(i);

    if (!(a.indexOf(k)>=0))
        e.preventDefault();
});

Use HTML5 input number type instead and leverage native browser validation. Thus, no JavaScript required.

<input type="number" />

It has wide support in browsers and it's the standard and best-practice solution.

Also on mobile and tablets the numeric key pad will appear instead.

See demo

You should use this function to set input filters on various DOM elements including textarea

function setInputFilter(textbox, inputFilter) {
        ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
            textbox.addEventListener(event, function() {
                if (inputFilter(this.value)) {
                    this.oldValue = this.value;
                    this.oldSelectionStart = this.selectionStart;
                    this.oldSelectionEnd = this.selectionEnd;
                } else if (this.hasOwnProperty("oldValue")) {
                    this.value = this.oldValue;
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                } else {
                    this.value = "";
                }
            });
        });
    }

Then you simply set the filter, like that:

setInputFilter(document.getElementById("textarea_id"), value => {
        return /^\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

I know I'm late to the party but I'm writing this here as a reminder for myself in the future.

The html:

<textarea (oninput)="validateValue(event)"></textarea>

The JavaScript:

function validateValue(event){
  const elem = event.target;
  const value = elem.value;
  const numVal = value.replace(/\D/,"");
  elem.value = numVal;
}

Comments:

2023-01-25 00:10:05

The problem with using only /\D/ is if you use copy + paste. Then only the first character will be filtered. Use /\D+/g to solve this.

Not sure if that was already available 8 years ago but the simplest way now to achieve what you want, if you want user to enter a date is:

<input type="date">

I did not get the solution from @Morfinismo to work out of the box. However some small modifications did the trick.

<textarea oninput="validateValue(this)"></textarea>

<script>
    function validateValue(elem) {
        const value = elem.value;
        const numVal = value.replace(/\D+/g, "");
        elem.value = numVal;
    }
</script>

If you want to allow only numbers and new line character you can do it like this:

<textarea oninput="validateValue(this)"></textarea>

<script>
    function validateValue(elem) {
        const value = elem.value;
        const numVal = value.replace(/[^\d\n]+/g, "");
        elem.value = numVal;
    }
</script>

Questions & Answers