Filter input text to enter only number and not even decimal
From the Beufy doc, I get that <b-input>
is essentially an extension of native <input>
field so it accepts attribute that the native input would accept.
As of now, it is not possible to completely filter out specific characters using pure HTML attributes like pattern="\d+"
.
What you can do is to use a "keydown" event listener to filter out these characters using native event.preventDefault()
by respective keys. Of course, we could use the native <input type="number">
to help in general.
const app = new Vue({ el: '#app', methods: { filterKey(e){ const key = e.key;
// If is '.' key, stop it if (key === '.') return e.preventDefault(); // OPTIONAL // If is 'e' key, stop it if (key === 'e') return e.preventDefault(); }, // This can also prevent copy + paste invalid character filterInput(e){ e.target.value = e.target.value.replace(/[^0-9]+/g, ''); } }});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"> <input type="number" step="1" min="0" @keydown="filterKey" // OR @input="filterInput" ></div>
HTML text input allow only numeric input
Note: This is an updated answer. Comments below refer to an old version which messed around with keycodes.
JavaScriptTry it yourself on JSFiddle.
You can filter the input values of a text <input>
with the following setInputFilter
function (supports Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations, non-typeable keys, the caret position, different keyboard layouts, validity error message, and all browsers since IE 9):
// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter, errMsg) {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
textbox.addEventListener(event, function(e) {
if (inputFilter(this.value)) {
// Accepted value
if (["keydown","mousedown","focusout"].indexOf(e.type) >= 0){
this.classList.remove("input-error");
this.setCustomValidity("");
}
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
// Rejected value - restore the previous one
this.classList.add("input-error");
this.setCustomValidity(errMsg);
this.reportValidity();
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
// Rejected value - nothing to restore
this.value = "";
}
});
});
}
You can now use the setInputFilter
function to install an input filter:
setInputFilter(document.getElementById("myTextBox"), function(value) {
return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
}, "Only digits and '.' are allowed");
Apply your preferred style to input-error class. Here's a suggestion:
.input-error{
outline: 1px solid red;
}
See the JSFiddle demo for more input filter examples. Also note that you still must do server side validation!
TypeScriptHere is a TypeScript version of this.
function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean, errMsg: string): void {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
if (inputFilter(this.value)) {
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
this.value = this.oldValue;
if (this.oldSelectionStart !== null &&
this.oldSelectionEnd !== null) {
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
}
} else {
this.value = "";
}
});
});
}
jQueryThere is also a jQuery version of this. See this answer.
HTML 5HTML 5 has a native solution with <input type="number">
(see the specification), but note that browser support varies:
- Most browsers will only validate the input when submitting the form, and not when typing.
- Most mobile browsers don't support the
step
,min
andmax
attributes. - Chrome (version 71.0.3578.98) still allows the user to enter the characters
e
andE
into the field. Also see this question. - Firefox (version 64.0) and Edge (EdgeHTML version 17.17134) still allow the user to enter any text into the field.
Try it yourself on w3schools.com.
How to make HTML input tag only accept numerical values?
HTML 5You can use HTML5 input type number to restrict only number entries:
<input type="number" name="someid" />
This will work only in HTML5 complaint browser. Make sure your html document's doctype is:
<!DOCTYPE html>
See also https://github.com/jonstipe/number-polyfill for transparent support in older browsers.
JavaScriptUpdate: There is a new and very simple solution for this:
It allows you to use any kind of input filter on a text
<input>
,
including various numeric filters. This will correctly handle
Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations,
non-typeable keys, and all keyboard layouts.
See this answer or try it yourself on JSFiddle.
For general purpose, you can have JS validation as below:
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
<input name="someid" type="number" onkeypress="return isNumberKey(event)"/>
If you want to allow decimals replace the "if condition" with this:
if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))
Source: HTML text input allow only numeric input
JSFiddle demo: http://jsfiddle.net/viralpatel/nSjy7/
How to allow only numeric (0-9) in HTML inputbox using jQuery?
Note: This is an updated answer. Comments below refer to an old version which messed around with keycodes.
jQueryTry it yourself on JSFiddle.
There is no native jQuery implementation for this, but you can filter the input values of a text <input>
with the following inputFilter
plugin (supports Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations, non-typeable keys, the caret position, different keyboard layouts, validity error message, and all browsers since IE 9):
// Restricts input for the set of matched elements to the given inputFilter function.
(function($) {
$.fn.inputFilter = function(callback, errMsg) {
return this.on("input keydown keyup mousedown mouseup select contextmenu drop focusout", function(e) {
if (callback(this.value)) {
// Accepted value
if (["keydown","mousedown","focusout"].indexOf(e.type) >= 0){
$(this).removeClass("input-error");
this.setCustomValidity("");
}
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
// Rejected value - restore the previous one
$(this).addClass("input-error");
this.setCustomValidity(errMsg);
this.reportValidity();
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
// Rejected value - nothing to restore
this.value = "";
}
});
};
}(jQuery));
You can now use the inputFilter
plugin to install an input filter:
$(document).ready(function() {
$("#myTextBox").inputFilter(function(value) {
return /^\d*$/.test(value); // Allow digits only, using a RegExp
},"Only digits allowed");
});
Apply your preferred style to input-error class. Here's a suggestion:
.input-error{
outline: 1px solid red;
}
See the JSFiddle demo for more input filter examples. Also note that you still must do server side validation!
Pure JavaScript (without jQuery)jQuery isn't actually needed for this, you can do the same thing with pure JavaScript as well. See this answer.
HTML 5HTML 5 has a native solution with <input type="number">
(see the specification), but note that browser support varies:
- Most browsers will only validate the input when submitting the form, and not when typing.
- Most mobile browsers don't support the
step
,min
andmax
attributes. - Chrome (version 71.0.3578.98) still allows the user to enter the characters
e
andE
into the field. Also see this question. - Firefox (version 64.0) and Edge (EdgeHTML version 17.17134) still allow the user to enter any text into the field.
Try it yourself on w3schools.com.
React Native TextInput that only accepts numeric characters
That is the correct way to do it till such a component (or attribute on the TextInput) is specifically developed.
The web has the ‘number’ type for the input element, but that is web based and react-native does not use a web view.
You could consider to create that input as a react component on it’s own (maybe call NumberInput): that’ll enable you to reuse it or maybe even open source it since you can create many TextInputs that has different value filters/checkers.
The downside to immediate correction is to ensure correct feedback is given to the user as to prevent confusion as to what happened to his value
How to allow only numbers in textbox in reactjs?
Basic idea is:
Use controlled component (use value and onChange property of input field), and inside onChange handle check whether the entered value is proper number or not. Update the state only when entered value is a valid number.
For that use this regex: /^[0-9\b]+$/;
onChange handler will be:
onChange(e){
const re = /^[0-9\b]+$/;
// if value is not blank, then test the regex
if (e.target.value === '' || re.test(e.target.value)) {
this.setState({value: e.target.value})
}
}
Working example:
class App extends React.Component{ constructor(){ super(); this.state = {value: ''}; this.onChange = this.onChange.bind(this) } onChange(e){ const re = /^[0-9\b]+$/; if (e.target.value === '' || re.test(e.target.value)) { this.setState({value: e.target.value}) } } render(){ return <input value={this.state.value} onChange={this.onChange}/> }}
ReactDOM.render(<App/>,document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>
Ensure only valid input number format in Flutter TextField
Have you tried using DecimalTextInputFormatter
input formatter?
TextFormField(
inputFormatters: [DecimalTextInputFormatter(decimalRange: 1)],
keyboardType: TextInputType.numberWithOptions(decimal: true),
)
You can achieve the same result using a regular expression along with FilteringTextInputFormatter
(following your approach) like:
FilteringTextInputFormatter.allow(RegExp(r'^\d+\.?\d{0,1}')),
The range {0,1}
does the trick
jQuery: what is the best way to restrict "number"-only input for textboxes? (allow decimal points)
UpdateThere is a new and very simple solution for this:
It allows you to use any kind of input filter on a text
<input>
,
including various numeric filters. This will correctly handle
Copy+Paste, Drag+Drop, keyboard shortcuts, context menu operations,
non-typeable keys, and all keyboard layouts.
See this answer or try it yourself on JSFiddle.
jquery.numeric pluginI've successfully implemented many forms with the jquery.numeric plugin.
$(document).ready(function(){
$(".numeric").numeric();
});
Moreover this works with textareas also!
However, note that Ctrl+A, Copy+Paste (via context menu) and Drag+Drop will not work as expected.
HTML 5With wider support for the HTML 5 standard, we can use pattern
attribute and number
type for input
elements to restrict number only input. In some browsers (notably Google Chrome), it works to restrict pasting non-numeric content as well. More information about number
and other newer input types is available here.
Related Topics
How to Modify Chartjs Tooltip So I Can Add Customized Strings in Tooltips
Javascript Submit Multiple Forms With One Button
Write a Auto-Fill and Submit Web Form Program
How to Close Sweet Alert on Ajax Request Completion
Trying to Add Image to Pdf Using Jspdf
Filtering Item from Nested Object Array in Typescript
How to Set Page Size and Set Margin in Print in Internet Explorer With JavaScript and CSS
Jquery Class on Click Works on Desktop But Not Mobile
How to Get the Contextpath from Javascript, the Right Way
React Passing Import Name as Prop and Adding to Image Src
Jquery Wait Until Ajax Call Has Got Data Before Displaying
Discord.Js Ban/Kick Commands Available to All Users. How to Fix This
Size of Json Object (In Kbs/Mbs)
Swiper Slider - Thumbs Gallery With Slidetoclickedslide Do Not Work Properly
Programmatically Clicking Button in React Native
Use Localstorage Variables in PHP