입력 유형 = "숫자"가 음수 값을 얻지 못하게하는 방법이 있습니까?

긍정적 인 값 만 얻고 싶습니다 .html 만 사용
하지 못하게하는 방법이 있습니까 유효성 검사 방법을 제안하지 마십시오

다음 과 같은 min속성을 사용하십시오 .

<input type="number" min="0">

@Abhrabm 답변에 만족하지 못했습니다 .

위 / 아래 화살표로 음수 가 입력되는 것을 막는 반면 사용자는 키보드로 음수를 입력 할 수 있습니다.

해결책은 키 코드 로 방지하는 것입니다 .

// Select your input element.
var number = document.getElementById('number');

// Listen for input event on numInput.
number.onkeydown = function(e) {
    if(!((e.keyCode > 95 && e.keyCode < 106)
      || (e.keyCode > 47 && e.keyCode < 58) 
      || e.keyCode == 8)) {
        return false;
    }
}

<form action="" method="post">
  <input type="number" id="number" min="0" />
  <input type="submit" value="Click me!"/>
</form>

@Hugh Guiney가 제공 한 설명 :

점검중인 키 코드 :

• 95에서 <106은 Numpad 0 내지 9에 해당하고;
• 47에서, <58은 숫자 행에서 0 내지 9에 대응하고; 8은 백 스페이스입니다.

따라서이 스크립트는 유효하지 않은 키가 입력되는 것을 방지합니다.

나를 위해 해결책은 다음과 같습니다.

<input type="number" min="0" oninput="this.value = Math.abs(this.value)">

이 코드는 나를 위해 잘 작동합니다. 다음을 확인하십시오.

<input type="number" name="test" min="0" oninput="validity.valid||(value='');">

쉬운 방법 :

<input min='0' type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57">

음수가 입력 된 경우 십진수를 허용하고 전체 입력을 지우고 싶지 않았습니다. 이것은 적어도 크롬에서 잘 작동합니다.

<input type="number" min="0" onkeypress="return event.charCode != 45">

@Manwal 대답은 ​​좋지만 더 나은 가독성을 위해 코드 줄이 적은 코드를 좋아합니다. 또한 대신 HTML에서 onclick / onkeypress 사용법을 사용하고 싶습니다.

내 제안 솔루션도 동일합니다 : 추가

min="0" onkeypress="return isNumberKey(event)"

html 입력에

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode;
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

자바 스크립트 함수로.

말했다시피, 똑같습니다. 문제를 해결하는 방법을 개인적으로 선호합니다.

jQuery를 사용하면 다음 코드를 사용하여 포커스 아웃에서 음수 값을 덮어 쓸 수 있습니다.

$(document).ready(function(){
    $("body").delegate('#myInputNumber', 'focusout', function(){
        if($(this).val() < 0){
            $(this).val('0');
        }
    });
});

이것은 서버 측 유효성 검사를 대체하지 않습니다!

각도 2 솔루션은 다음과 같습니다.

OnlyNumber 클래스를 작성하십시오

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

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

  // Allow decimal numbers. The \. is only allowed once to occur
  private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);

  // Allow key codes for special events. Reflect :
  // Backspace, tab, end, home
  private specialKeys: Array<string> = ['Backspace', 'Tab', 'End', 'Home'];

  constructor(private el: ElementRef) {
  }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    // Allow Backspace, tab, end, and home keys
    if (this.specialKeys.indexOf(event.key) !== -1) {
      return;
    }

    // Do not use event.keycode this is deprecated.
    // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
    let current: string = this.el.nativeElement.value;
    // We need this because the current value on the DOM element
    // is not yet updated with the value from this event
    let next: string = current.concat(event.key);
    if (next && !String(next).match(this.regex)) {
      event.preventDefault();
    }
  }
}

app.module.ts의 선언에 OnlyNumber를 추가하고 앱 어디에서나 이와 같이 사용하십시오.

<input OnlyNumber="true">

oninput="this.value=(this.value   < Number(this.min) || this.value   > Number(this.max))  ? '' : this.value;"

더 많은 코드로 HTML을 더럽 히지 않으려면 다른 방법으로 Angular를 사용하여 추가하십시오.

필드 valueChanges 만 구독하고 Value를 절대 값으로 설정해야합니다 (다른 valueChange가 발생하므로 재귀 호출 및 최대 호출 크기 초과 오류를 유발하므로 새 이벤트를 생성하지 않도록주의해야 함).

HTML 코드

<form [formGroup]="myForm">
    <input type="number" formControlName="myInput"/>
</form>

TypeScript 코드 (구성 요소 내부)

formGroup: FormGroup;

ngOnInit() { 
    this.myInput.valueChanges 
    .subscribe(() => {
        this.myInput.setValue(Math.abs(this.myInput.value), {emitEvent: false});
    });
}

get myInput(): AbstractControl {
    return this.myForm.controls['myInput'];
}

이에 대한 답변은 도움이되지 않습니다. 위 / 아래 키를 사용할 때만 작동하지만 -11을 입력하면 작동하지 않습니다. 여기에 내가 사용하는 작은 수정이 있습니다.

이것은 정수입니다

  $(".integer").live("keypress keyup", function (event) {
    //    console.log('int = '+$(this).val());
    $(this).val($(this).val().replace(/[^\d].+/, ""));
    if (event.which != 8 && (event.which < 48 || event.which > 57))
    {
        event.preventDefault();
    }
   });

가격이 많을 때

        $(".numeric, .price").live("keypress keyup", function (event) {
     //    console.log('numeric = '+$(this).val());
    $(this).val($(this).val().replace(/[^0-9\,\.]/g, ''));

    if (event.which != 8 && (event.which != 44 || $(this).val().indexOf(',') != -1) && (event.which < 48 || event.which > 57)) {
        event.preventDefault();
    }
   });

이 솔루션을 사용하면 키보드로 복사 붙여 넣기를 포함한 모든 키보드 기능을 사용할 수 있습니다. 마우스로 음수를 붙여 넣을 수 없습니다. 모든 브라우저에서 작동하며 코드 펜 의 데모 는 부트 스트랩과 jQuery를 사용합니다. 영어 이외의 언어 설정 및 키보드에서 작동합니다. 브라우저가 붙여 넣기 이벤트 캡처 (IE)를 지원하지 않으면 포커스 아웃 후 음수 부호가 제거됩니다. 이 솔루션은 기본 브라우저가 min = 0 type = number 인 것처럼 동작합니다.

마크 업 :

<form>
  <input class="form-control positive-numeric-only" id="id-blah1" min="0" name="nm1" type="number" value="0" />
  <input class="form-control positive-numeric-only" id="id-blah2" min="0" name="nm2" type="number" value="0" />
</form>

자바 스크립트

$(document).ready(function() {
  $("input.positive-numeric-only").on("keydown", function(e) {
    var char = e.originalEvent.key.replace(/[^0-9^.^,]/, "");
    if (char.length == 0 && !(e.originalEvent.ctrlKey || e.originalEvent.metaKey)) {
      e.preventDefault();
    }
  });

  $("input.positive-numeric-only").bind("paste", function(e) {
    var numbers = e.originalEvent.clipboardData
      .getData("text")
      .replace(/[^0-9^.^,]/g, "");
    e.preventDefault();
    var the_val = parseFloat(numbers);
    if (the_val > 0) {
      $(this).val(the_val.toFixed(2));
    }
  });

  $("input.positive-numeric-only").focusout(function(e) {
    if (!isNaN(this.value) && this.value.length != 0) {
      this.value = Math.abs(parseFloat(this.value)).toFixed(2);
    } else {
      this.value = 0;
    }
  });
});

다음은 숫자 만 허용하는 QTY 필드에 가장 적합한 솔루션입니다.

// Only allow numbers, backspace and left/right direction on QTY input
    if(!((e.keyCode > 95 && e.keyCode < 106) // numpad numbers
        || (e.keyCode > 47 && e.keyCode < 58) // numbers
        || [8, 9, 35, 36, 37, 39].indexOf(e.keyCode) >= 0 // backspace, tab, home, end, left arrow, right arrow
        || (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + A
        || (e.keyCode == 67 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + C
        || (e.keyCode == 88 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + X
        || (e.keyCode == 86 && (e.ctrlKey === true || e.metaKey === true)) // Ctrl/Cmd + V
    )) {
        return false;
    }