Restrict decimal entries in html textbox - html

I have an HTML Textbox where the user will input data, which in turn will be saved in an SQLcolumn of type decimal(12,4). How will I restrict my textbox to allow either number or decimal value of above-mentioned precision?
This is my textbox code:
#Html.TextBoxFor(m => m.Rate, null, new {#maxlength = "12", style = "width:87px;"})

there is a same question with a proper answer please refer to this link.
link
the answer of this question on the link take only decimal point and if you want number as well with the decimal points.just remove the not sign (!) in this line.
if (charCode != 46 && charCode > 31
&& (charCode < 48 || charCode > 57))
return false;

Related

How to prevent user typing backspace at beginning of a line if previous line is max characters

I have textarea that every line is limited to 70 characters.
Here is my code:
var MAX_LENGTH_PER_LINE=70;
$('#txtComment').keypress(function (e) {
if(e.key != 'Enter'){
var CursorPosition=document.getElementById('txtComment').selectionStart;
var lines = $(this).val().split("\n");
var sum=0;
for (var i=0; i < lines.length; i++)
{
if(lines[i].length >= MAX_LENGTH_PER_LINE && CursorPosition > sum && CursorPosition <= lines[i].length + sum + i){
e.preventDefault();
alert("Max characters for comment - 70");
break;
}
sum+=lines[i].length;
}
}
});
It works very nice, exept of one case, when user press backspace at beggining of a line, the line he pressed on, passed to end of previous line also if its full in 70 characters.
My problem is i am using keypress, and its not recognize backspace, i searched and saw i need to use keydown or keyup but i cant use it because they fired before text includes the new string user typed and i need to check text after change and if its more than 70 characters, to prevent typing, another problem is that keypress is not recognize e.preventDefault because it fired after typing occurred.
So how to check text with new string user type, and prevent it if its more than 70 characters?
please, any idea, i am working on it three days....

IE 11 not respecting input number and allowing non numeric values to be entered

The browser IE 11 is allowing non-numeric values to be entered into a number input. I have tested in other browsers such as Chrome and Firefox and they are respecting the number input.
This image shows how in IE 11 the user can enter a comma and the letters "gal".
<div class>
<input type="number" min="0" onkeydown="return event.keyCode !== 69" class="form-control questTxt" value="">
</div>
Is number input not supported in IE 11? This resource appears to show that it does?
LINK TO RESOURCE
As epascarello said, the type attribute is there for validation purposes, so if you enter text into a number field and try to submit a form, it will not let you. I couldn't tell you why that's not default for a number input, but browser compatibility has been a pain ever since browsers existed.
If you want to the user to actually be unable to enter anything except for numbers, you can do it in JavaScript.
const inputField = document.querySelector("input");
inputField.addEventListener("keypress", e => {
if (e.which > 31 && (e.which < 48 || e.which > 57)) {
e.preventDefault();
}
});
Looks like IE 11 browser has some issues with Input type Number.
You can refer to the known issues for the IE browser on the CanIuse site.
As a workaround, you can use this JS function.
function handleKeyPress(e) {
let newValue = e.target.value + e.key;
if (
// It is not a number nor a control key?
isNaN(newValue) &&
e.which != 8 && // backspace
e.which != 17 && // ctrl
newValue[0] != '-' || // minus
// It is not a negative value?
newValue[0] == '-' &&
isNaN(newValue.slice(1)))
e.preventDefault(); // Then don't write it!
}
Insert a number:
<input onKeyPress="handleKeyPress(event)"/>
Reference:
input type=“number” not working in IE browser

Angular6 - Custom Input field

I have to create input field in Angular, that input field allow only number with 2 decimal places like '123455.12'
Below is what i have tried so far
<input myCustomDirective type="text">
I created Directive. In my CustomDirective I used HostListener for keypress event in that listener i used regular expression to validate but it allow only number it not allowing to enter '.(dot)'
new RegExp('^[0-9]*$');// my regular expression
Here's a Directive that takes Only Decimal Values with custom
precisions.
https://stackblitz.com/edit/angular-decimal-directive
It will allow you to put digits before the .(dot)
It will not allow you to paste (ctrl+v) non-decimal.
It will take single .(dot) . by default it will take 2 digit after the . (dot).
Example:
`<input type="text" [(ngModel)]="myVar" decimal>`
But you can define the precision size like that :-
`<input type="text" [(ngModel)]="myVar" [decimal]="3">`
If you want to use Only Integer not floating point you can use the Directive Like this:
<input type="text" [(ngModel)]="myVar" [decimal]="0">
If you don't complete enough precision in the input , then it will
automatically complete rest of the number precision (also if a .(dot)
needed) by onblur event.
You Can't inject string value by two way binding.
N.B: [(ngModel)] is mandatory for using the Directive.
ng-pattern that you reguire is ng-pattern=" /^[.\d]+$/"
Please check out the fiddle jsfiddle.net/gsferreira/Lsv9f0b0 , posted in link ,
ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" is the key
From Plain Old Java script fiddle link https://jsfiddle.net/j3cbytws/
Only numbers please and a single dot allowed , nothing else:
<input type="number" name="someid" onkeypress="return isNumberKey(event)" />
<script>
var isDecimalAlredyEcountered = false;
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : event.keyCode
if(isDecimalAlredyEcountered && charCode === 46)
return false;
if(charCode == 46)
{isDecimalAlredyEcountered =true;
}
if (charCode > 31 && (charCode < 48 || charCode > 57)&& charCode != 46)
return false;
return true;
}
</script>
There can be an issue of backspace char and delete with the above implementation, so you have to reset the state on clear

Don't let a user type the period character in an HTML5 input type number

So right now the user is able to insert a decimal value in the number field of the HTML5 input type="number". I want to prevent that, so if a user types "5.1" it will insert "51" in the textbox.
Is there any way to do this? Thanks!
The definite answer is this:
function preventDot(e) {
var key = e.charCode ? e.charCode : e.keyCode;
if (key == 46) {
e.preventDefault();
}
}
And bind it on keypress
You can use a regular expression to find the characters that make the value a decimal value, and then delete them so that the value internally becomes an integer:
/[\.,]/

How to completely restrict decimal points from being entered in text input?

I have been searching through many HTML-related questions here and I am currently using the input tag pattern attribute to validate my inputs. This works by only allowing one or two numbers being input, and does not submit invalid data. However, I would prefer unwanted characters (decimal point and letters) to not be able to be put in the text box at all.
This will do it for you https://jsfiddle.net/DIRTY_SMITH/cfckvvzw/4/
updated fiddle to allow numbers in numlock to work too https://jsfiddle.net/DIRTY_SMITH/cfckvvzw/5/
<input ID="FirstName1" class="test" onkeydown="return Fname(event);">
<script>
function Fname(evt) {
evt = (evt) ? evt : event;
var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : ((evt.which) ? evt.which : 0));
//checks for invalid keystrokes (numbers only)
if (charCode > 57 || charCode < 48) {
return false;
} else {
return true;
}
}
</script>