We Keep Coding

Validate the input, Input field should not accept more than 100 value in angular 8

I had to validate a input field to accept only number and decimal, one digit after the decimal. i was able to achieve it. i also need to limit the input field such that, it should not take more than 100. I have added a condition for that but its failing. I'm validating this on keypress can anyone please let me know where im going wrong.
stackblitz editor link - https://stackblitz.com/edit/angular-with-alternative-6zczr4
link - https://angular-with-alternative-6zczr4.stackblitz.io
code:-
app.component.html
<div class="form-group mr-3">
<p class="mb-0">Accepts Number
</p>
<input type="number" min="0" max="100" (keypress)="numberOnly($event)" class="form-control form-width" name="electricity" [(ngModel)]="electricity">
</div>
app.component.ts
public electricity = "";
numberOnly(event): boolean {
const charCode = event.which ? event.which : event.keyCode;
const value = event.target.value;
if (("" + event.target.value).indexOf(".") !== -1) {
if (("" + event.target.value).split(".")[1].length > 0) {
return false;
}
}
if (event.target.value > 100) {
return false;
}
if (charCode === 46) {
return true;
}
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
return false;
}
return true;
}

if (event.target.value > 100) {
return false;
}
This should indeed fail. You are comparing whatever the value of the input box is, with 100. You need to compare the length of the value with 100, not the value itself. You could use the following:
if(("" + event.target.value).length > 100){
return false
}

You can achieve the result with pure html. No need for javascript.
Have a look at the code, is this what you're looking for?
<form>
<input
type="number"
min="0"
max="100"
step="0.1">
<button type="submit">Submit</button>
</form>

Javascript restrict text field to numbers and decimals?

I've tried a few solutions here but all of them boil down to removing the non-numeric input after the input is put in.
This solution here works for numbers:
https://jsfiddle.net/HkEuf/17470/
But it doesn't allow decimals.
I've to edit it as follows but it still won't allow for decimals:
$(document).ready(function () {
//called when key is pressed in textbox
$("#quantity").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 110 && e.which != 190 && e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57 )) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="quantity" id="quantity" />

You could do this all with HTML, all you need to do is use the number type with a step attribute like this.
Note 1: By adding the required attribute we can validate the field on submit otherwise it won't be validated unless there is input within the field.
Note 2: the number type also supports min and max
Note 3: Supports IE 10+ and all other major browsers
<form>
<input type="number" step="0.001" name="quantity" id="quantity" required>
<p><input type="submit" value="Numbers Only!"></p>
</form>
Prevent "E" key
We can block the e key with a keydown event and if e.key == 'e' we can prevent the key:
Array.from(document.querySelectorAll('[type=number]')).forEach(i => {
i.addEventListener('keydown', function(e) {
if(e.key == 'e') e.preventDefault()
})
})
<form>
<input type="number" step="0.001" name="quantity" id="quantity" required>
<p><input type="submit" value="Numbers Only!"></p>
</form>

Here I've added some code in your jsfiddle reference to allow decimal number and prevent user to enter "." symbol twice. Here's the complete code
$(document).ready(function () {
//called when key is pressed in textbox
$("#quantity").keypress(function (e) {
var tempInput = $("#quantity").val()
if(tempInput.split(".").length >= 2 && e.which == 46)
return false; //To check whether user has entered dot symbol before
//if the letter is not digit then display error and don't type anything
if (e.which != 110 && e.which != 46 && e.which != 190 && e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});
If anything goes wrong, feel free to ask.
P.S : I assume that you use "." symbol to represent float number

$(document).ready(function () {
//called when key is pressed in textbox
$("#quantity").keypress(function (e) {
// If it's not a digit then display error and don't type anything
if (e.which == 46 || e.which == 8 || e.which == 0 || (e.which > 48 && e.which < 57 )) {
// Validate count of decimal separators
var dSCount = ($(this).val().match(/\./g) || []).length;
if (e.which == 46 && dSCount > 0) {
// Display error message
$("#errmsg").html("Only one decimal separator allowed").show().fadeOut("slow");
return false;
}
} else {
// Display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
});
There is a chance that the input ends with a dot, you'll have to validate that too (you could simply remove the trailing decimal separator before the form submission).

keypress event not firing with enter key in angular 2

keypress event not firing with enter key in angular 2, following is the html and angular 2 code:
HTML
<input [(ngModel)]="filters[i]" type="number" size="30" pInputText (keypress)="filterByField($event, col.field, fieldType.TEXT)" class="{{'input-'+col.field}}" title="Only numbers are allowed" />
Angular 2
filterByField(event, field, fieldType){
console.log(event)
if(fieldType === this.fieldType.DD){
event.originalEvent.stopPropagation();
this.resetFilterBy(event.value, field);
this.loadData(null, true);
}
else if(fieldType === this.fieldType.TEXT){
let charCode = (event.which) ? event.which : event.keyCode;
console.log(charCode)
if (charCode == 101 && field == this.fields.TASKID.field){
event.preventDefault();
return false;
}
if((charCode === 13 && event.target.value.trim() !== "") || (charCode === 8) || (charCode === 46)) {
let filterValue = event.target.value;
this.resetFilterBy(filterValue, field);
this.loadData(null, true);
}
}
}

If you need to only listen for enter keypress event then you can use "keyup.enter" event in your html like:
<input #box (keyup.enter)="onEnter(box.value)">
Hope this helps. :)

#Component({
selector: 'my-search',
template: `
<input #criteria type='text' placeholder="Enter criteria" (keypress)="preventNumbers($event)" />
<button (click)="search(criteria.value)">Search</button>
`
})
export class MySearchComponent {
preventNumbers(e) {
console.log(e.keyCode);
if (e.keyCode >= 48 && e.keyCode <= 57) {
// we have a number
return false;
}
}
search(criteria) {
console.log("search for " + criteria);
}
}

Probably it's breaking because of the extra parameters at filterByField function
(keypress)="filterByField($event, col.field, fieldType.TEXT)"
passed as part of the call, Make sure all the properties you are binding in HTML are defined in component.

Backspace not working after using jquery class

For an input field I have used a class
Here code for input field:
<?php
echo $this->Form->input('duration', array('class'=>'input-large text-right number- field','value'=>'0'));
echo $this->Form->error('duration');
?>
Here the jquery class code:
$(".number-field").keypress(function(e) {
var code = e.which || e.keyCode;
if(code >= 48 && code <= 57) {
console.debug(code);
} else {
return false;
}
});
Main reason In input field use can't type character in digits field. This class working fine.But after type digits backspace not working. For example suppose I have typed 1956, now I want to edit it 1955. In here I am enable to cut 6 by backspace.

You can use following script -
$(".number-field").keypress(function(e) {
var code = e.which || e.keyCode;
//allow Backspace and Delete key.
if((code >= 48 && code <= 57) || code == 8 || code == 46) {
console.debug(code);
} else {
return false;
}
});
Similar to escaping the 'backspace' key you might want to escape the 'Delete' key(code == 46)
If you just want to allow the numbers in input type then you can use HTML5 input type number.
<input type="number" name="year">

You can use regex for this:
var reg = /^\d+$/; // only number
$(".number-field").keypress(function(e) {
var code = e.which || e.keyCode;
if(reg.test(String.fromCharCode(code))) {
console.debug(code);
} else {
return false;
}
});

how to detect textbox field empty spaces?

I need help in textbox keypress function.
If textbox fields is empty menad no need to post values.
my following functions working .if textbox fields is empty,i press enter key going nexline thats fine.but i press enter key two times values posted.
what is the problem in my code.plz help me.
$(".ppop-comment").keypress(function(e)
{
if($('#add_comment').val()=="")
{
if (e.which == 32)
return false;
}
else if (e.keyCode == 13 && !e.shiftKey && !$('#add_comment').val()==" ")
{
$("#submit-comment").click();
}
});
<form id="commentform" method="post">
<textarea id="add_comment" name="meetnewpeople[message]" class="popup-comment">
<input id="submit-comment" type="button" value="Post a comment" />
</form>

$(".ppop-comment").keypress(function(e)
{
if($('#add_comment').val().trim()!="")
{
if (e.keyCode == 13 && !e.shiftKey && !$('#add_comment').val()==" ")
{
$("#submit-comment").click();
}
}
else
{
return false;
}
});