Prevent User from Typing in Input At Max Value

Prevent user from typing in input at max value

Checking keyup is too late, the event of adding the character has already happened. You need to use keydown. But you also want to make sure the value isn't > 100 so you do need to also use keyup to allow js to check the value then too.

You also have to allow people to delete the value, otherwise, once it's > 100 nothing can be changed.

<input class="equipCatValidation" type="number" />

When using input type="number", change also needs to be on the event list.

$('.equipCatValidation').on('keydown keyup change', function(e){
    if ($(this).val() > 100 
        && e.keyCode !== 46 // keycode for delete
        && e.keyCode !== 8 // keycode for backspace
       ) {
       e.preventDefault();
       $(this).val(100);
    }
});

http://jsfiddle.net/c8Lsvzdk/

How to prevent inserting value that is greater than to max in number field in html

Like you said input of type number will work fine with arrows and not with manual change so try to use oninput event to help you control user inputs :

    document.getElementsByClassName('edit-items')[0].oninput = function () {        var max = parseInt(this.max);
        if (parseInt(this.value) > max) {            this.value = max;         }    }

<input type="number" class="edit-items" max='10'/>

Angular 4 input[type='number'] prevent typing over min/max

This is a directive (Stackblitz)I am sure will help your case, it doesn´t let other input values other than numbers but also it allows CTRL+C, CTRL+V among other usefull keys for inputs.

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[NumericInput]'
})
export class NumericInput {

    constructor(private el: ElementRef) { }

    @Input() latestInputValue: number;

    @HostListener('keydown', ['$event']) onKeyDown(event) {
        let e = <KeyboardEvent> event;

            if (this.latestInputValue < 0 || this.latestInputValue > 100) {
              e.preventDefault();
            } else if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
            // Allow: Ctrl+A
            (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+C
            (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+V
            (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
            // Allow: Ctrl+X
            (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
            // Allow: home, end, left, right
            (e.keyCode >= 35 && e.keyCode <= 39)) {
              // let it happen, don't do anything
              return;
            }
            // Ensure that it is a number and stop the keypress
            if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
                e.preventDefault();
            }
        }
}

HTML

<input NumericInput [latestInputValue]="someValue" [(ngModel)]="someValue" >

is it possible to prevent user input after a specific input length and also ban specific keys?

You can call a regex every time the input changes, to format the input:

const handleKeyDown = e => e.target.value = e.target.value.match(/^([^e+-]{0,2})/)[0]

<input type="text" oninput="handleKeyDown(event)">

Restrict input type="number" to its min or max if it is out of range

Actually input type=number only handles and not allows user to submit the form if the entered number is not in range

HTML5 <input> type = number prevent user from violating the min="" or max="" value

You can only safely inspect these things on server side. At the client side, everything is controlled by the client. The HTML code can be altered at the client side, and the javascript code can be altered at the client side.

So nothing that your server receives from a client can be guaranteed! This is the first lesson in web security. Checking of valid input has to be done at server side using a server side language like PHP.

The frontend can only make it "easy" for the user to enter valid data. For this there are a lot of things invented like min,max,type="number", required etc. But it depends on the browser how well these things are actually implemented and supported. So yes, from a frontend cross browser perspective we have a long way to go to make it look less messy.

To make it work in "all" browsers (I never include IE in "all"), you can use various javascript checks on your inputs to make sure the min and max are not being violated.

One nice way to do that would be to put an oninput listener on the inputs, using oninput="validate()" inside the html. Then use a function like valBetween (see below) to set the new value.

function validate() {
    this.value = valBetween(this.value, this.min, this.max);
}

function valBetween(v, min, max) {
    return (Math.min(max, Math.max(min, v)));
}

How to prevent user type in input textbox more than specified number of input character in angular?

You can just use maxlength='300' prop in you <textarea> like this

 <textarea type="text" style="margin-bottom: 25px"
                id="textAreaScroll"
                formControlName="text"
                placeholder="متن ..."
                maxLength="300">
      </textarea>

if you are reading the value from Component class just use attribute binding in [maxlength]='your_prop_name' - this might work

Thanks happy coding !!

Prevent User from Typing in Input At Max Value