Make Only Numbers or Alphabetical In HTML Input - Gudio Tutorial

    Social Items


Only Numbers or Alphabetical In HTML Input


Hello welcome back to this tutorial blog, Gudio Blog. Thank you for visiting my blog and if this is your first visit to this blog, Gudio Blog is a blog tutorial that discusses programming such as the web, desktop and mobile app. This blog also discusses blogger tips and tricks.

If you don't want to miss the article update on this blog, please leave your email in the newsletter subscription box on the menu beside. So every time there is a new article that I post on this blog, you will get a notification on your email.

If you often create web applications that contain menus to input numbers, then this tutorial Make Only Numbers or Alphabetical In HTML Input will really help you, so users will not be able to enter alphabets on input numbers and cannot enter numbers on alphabetical input.

Okay, we will stick to the topic of the discussion.

How To Make Only Numbers in HTML Input

In this first discussion, we will make input in HTML only a number, no alphabet.

Only Negative Integer in HTML Input


First, please make your HTML code first as in the code below:


<h3>
Only Negative Integer
</h3>
<span>Input your negative integer. Example (-1)</span>
<input id="negative">

<h5>
Read Complete Tutorial Only On <a href="https://www.gudioblog.com/2019/03/only-numbers-or-alphabetical-in-HTML-input.html" title="Tutorial" target="_blank">Gudio Blog</a>
</h5>


Then for the jquery you type the code below:


<script type="text/javascript">
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);
      }
    });
  });
}

setInputFilter(document.getElementById("negative"), function(value) {
  return /^-?\d*$/.test(value); });
</script>


Click the button below, to see the demo


Only Positive Integer in HTML Input

First, please make your HTML code first as in the code below:


<h3>
Only Positive Integer
</h3>
<span>Input your negative integer. Example (-1)</span>
<input id="negative">

<h5>
Read Complete Tutorial Only On <a href="https://www.gudioblog.com/2019/03/only-numbers-or-alphabetical-in-HTML-input.html" title="Tutorial" target="_blank">Gudio Blog</a>
</h5>


Then for the jquery you type the code below:


<script type="text/javascript">
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);
      }
    });
  });
}

setInputFilter(document.getElementById("positive"), function(value) {
  return /^\d*$/.test(value); });
</script>


Click the button below, to see the demo


Only Decimal Number in HTML Input

First, please make your HTML code first as in the code below:


<h3>
Only Decimal Number
</h3>
<span>Input your decimal number. Example (1.2)</span>
<input id="decimal">

<h5>
Read Complete Tutorial Only On <a href="https://www.gudioblog.com/2019/03/only-numbers-or-alphabetical-in-HTML-input.html" title="Tutorial" target="_blank">Gudio Blog</a>
</h5>


Then for the jquery you type the code below:


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);
      }
    });
  });
}

setInputFilter(document.getElementById("decimal"), function(value) {
  return /^-?\d*[.,]?\d*$/.test(value); });


Click the button below, to see the demo


Currency Number in HTML Input

First, please make your HTML code first as in the code below:


<h3>
Currency Number
</h3>
<span>Input your number. Example (0.25)</span>
<input id="currency">

<h5>
Read Complete Tutorial Only On <a href="https://www.gudioblog.com/2019/03/only-numbers-or-alphabetical-in-HTML-input.html" title="Tutorial" target="_blank">Gudio Blog</a>
</h5>


Then for the jquery you type the code below:


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);
      }
    });
  });
}

setInputFilter(document.getElementById("currency"), function(value) {
  return /^-?\d*[.,]?\d{0,2}$/.test(value); });


Click the button below, to see the demo


Only Hexadecimal in HTML Input

First, please make your HTML code first as in the code below:


<h3>
Only Hexadecimal
</h3>
<span>Input your hexadecimal. Which includes hexadecimal is: 1234567890ABCDEF</span><br>
<input id="hexa">

<h5>
Read Complete Tutorial Only On <a href="https://www.gudioblog.com/2019/03/only-numbers-or-alphabetical-in-HTML-input.html" title="Tutorial" target="_blank">Gudio Blog</a>
</h5>


Then for the jquery you type the code below:


<script type="text/javascript">
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);
      }
    });
  });
}

setInputFilter(document.getElementById("hexa"), function(value) {
  return /^[0-9a-f]*$/i.test(value); });
</script>


Click the button below, to see the demo


How To Make Only Alphabetically on The HTML Input


To make input from HTML only the alphabet is very easy. You don't need a javascript code here. For more details, please see the html below.


<h3>
Only Letters
</h3>
<span>Input your letters. Example (a-z)</span>
<input id="letters" onkeypress="return /[a-z]/i.test(event.key)">

<h5>
Read Complete Tutorial Only On <a href="https://www.gudioblog.com/2019/03/only-numbers-or-alphabetical-in-HTML-input.html" title="Tutorial" target="_blank">Gudio Blog</a>
</h5>


Click the button below, to see the demo



Video Tutorial

If you still don't clearly understand the explanation above, you can watch the video below : (Coming Soon)

Conclusion

That's a tutorial about Make Only Numbers or Alphabetical In HTML Input. Hopefully the tutorial I made can help you solve your problems.

And if this article is useful, please share this article with all the social media that you have. And don't forget to follow me on social media, so you don't miss out on updated information about this blog.

We meet again at other times and of course with other interesting articles.

Regards,

Gudio Blog

Make Only Numbers or Alphabetical In HTML Input


Only Numbers or Alphabetical In HTML Input


Hello welcome back to this tutorial blog, Gudio Blog. Thank you for visiting my blog and if this is your first visit to this blog, Gudio Blog is a blog tutorial that discusses programming such as the web, desktop and mobile app. This blog also discusses blogger tips and tricks.

If you don't want to miss the article update on this blog, please leave your email in the newsletter subscription box on the menu beside. So every time there is a new article that I post on this blog, you will get a notification on your email.

If you often create web applications that contain menus to input numbers, then this tutorial Make Only Numbers or Alphabetical In HTML Input will really help you, so users will not be able to enter alphabets on input numbers and cannot enter numbers on alphabetical input.

Okay, we will stick to the topic of the discussion.

How To Make Only Numbers in HTML Input

In this first discussion, we will make input in HTML only a number, no alphabet.

Only Negative Integer in HTML Input


First, please make your HTML code first as in the code below:


<h3>
Only Negative Integer
</h3>
<span>Input your negative integer. Example (-1)</span>
<input id="negative">

<h5>
Read Complete Tutorial Only On <a href="https://www.gudioblog.com/2019/03/only-numbers-or-alphabetical-in-HTML-input.html" title="Tutorial" target="_blank">Gudio Blog</a>
</h5>


Then for the jquery you type the code below:


<script type="text/javascript">
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);
      }
    });
  });
}

setInputFilter(document.getElementById("negative"), function(value) {
  return /^-?\d*$/.test(value); });
</script>


Click the button below, to see the demo


Only Positive Integer in HTML Input

First, please make your HTML code first as in the code below:


<h3>
Only Positive Integer
</h3>
<span>Input your negative integer. Example (-1)</span>
<input id="negative">

<h5>
Read Complete Tutorial Only On <a href="https://www.gudioblog.com/2019/03/only-numbers-or-alphabetical-in-HTML-input.html" title="Tutorial" target="_blank">Gudio Blog</a>
</h5>


Then for the jquery you type the code below:


<script type="text/javascript">
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);
      }
    });
  });
}

setInputFilter(document.getElementById("positive"), function(value) {
  return /^\d*$/.test(value); });
</script>


Click the button below, to see the demo


Only Decimal Number in HTML Input

First, please make your HTML code first as in the code below:


<h3>
Only Decimal Number
</h3>
<span>Input your decimal number. Example (1.2)</span>
<input id="decimal">

<h5>
Read Complete Tutorial Only On <a href="https://www.gudioblog.com/2019/03/only-numbers-or-alphabetical-in-HTML-input.html" title="Tutorial" target="_blank">Gudio Blog</a>
</h5>


Then for the jquery you type the code below:


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);
      }
    });
  });
}

setInputFilter(document.getElementById("decimal"), function(value) {
  return /^-?\d*[.,]?\d*$/.test(value); });


Click the button below, to see the demo


Currency Number in HTML Input

First, please make your HTML code first as in the code below:


<h3>
Currency Number
</h3>
<span>Input your number. Example (0.25)</span>
<input id="currency">

<h5>
Read Complete Tutorial Only On <a href="https://www.gudioblog.com/2019/03/only-numbers-or-alphabetical-in-HTML-input.html" title="Tutorial" target="_blank">Gudio Blog</a>
</h5>


Then for the jquery you type the code below:


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);
      }
    });
  });
}

setInputFilter(document.getElementById("currency"), function(value) {
  return /^-?\d*[.,]?\d{0,2}$/.test(value); });


Click the button below, to see the demo


Only Hexadecimal in HTML Input

First, please make your HTML code first as in the code below:


<h3>
Only Hexadecimal
</h3>
<span>Input your hexadecimal. Which includes hexadecimal is: 1234567890ABCDEF</span><br>
<input id="hexa">

<h5>
Read Complete Tutorial Only On <a href="https://www.gudioblog.com/2019/03/only-numbers-or-alphabetical-in-HTML-input.html" title="Tutorial" target="_blank">Gudio Blog</a>
</h5>


Then for the jquery you type the code below:


<script type="text/javascript">
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);
      }
    });
  });
}

setInputFilter(document.getElementById("hexa"), function(value) {
  return /^[0-9a-f]*$/i.test(value); });
</script>


Click the button below, to see the demo


How To Make Only Alphabetically on The HTML Input


To make input from HTML only the alphabet is very easy. You don't need a javascript code here. For more details, please see the html below.


<h3>
Only Letters
</h3>
<span>Input your letters. Example (a-z)</span>
<input id="letters" onkeypress="return /[a-z]/i.test(event.key)">

<h5>
Read Complete Tutorial Only On <a href="https://www.gudioblog.com/2019/03/only-numbers-or-alphabetical-in-HTML-input.html" title="Tutorial" target="_blank">Gudio Blog</a>
</h5>


Click the button below, to see the demo



Video Tutorial

If you still don't clearly understand the explanation above, you can watch the video below : (Coming Soon)

Conclusion

That's a tutorial about Make Only Numbers or Alphabetical In HTML Input. Hopefully the tutorial I made can help you solve your problems.

And if this article is useful, please share this article with all the social media that you have. And don't forget to follow me on social media, so you don't miss out on updated information about this blog.

We meet again at other times and of course with other interesting articles.

Regards,

Gudio Blog
iklan related post
Load comments