type =“number”를 양수로만 만드는 방법

현재 다음 코드가 있습니다

<input type="number" />

이런 식으로 나옵니다

오른쪽에있는 작은 선택기 만 있으면 숫자가 음수가 될 수 있습니다. 어떻게 방지 할 수 있습니까?

나는 사용 type="number"에 대해 의문을 가지고 있으며, 해결하는 것보다 더 많은 문제를 일으키고 있습니다. 어쨌든 위생 상태를 확인하려고합니다. 그래서 다시 사용으로 돌아 가야 type="text"합니까?

추가 속성을min

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

음수를 방지하는 또 다른 해결책을 찾았습니다.

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

얼마나 정확한지에 따라 다릅니다. 다음보다 정수만 허용하려고합니다.

<input type="number" min="1" step="1">

예를 들어 소수점 다음에 두 자리 숫자로 플로트를 원할 경우 :

<input type="number" min="0.01" step="0.01">

다음을 추가하여 입력에 양의 정수만 포함하도록 할 수 있습니다 onkeypressinput태그 내에 .

<input type="number" onkeypress="return event.charCode >= 48" min="1" >

여기서 event.charCode >= 480보다 크거나 같은 숫자 만 반환되도록합니다.min 되도록하고 태그는 입력 막대 내에서 스크롤하여 최소 1이 될 수 있도록합니다.

다음을 사용하여 type="number"양수 만 허용 할 수 있습니다 .

input type="number" step="1" pattern="\d+"

다음과 같은 방법으로 숫자 입력 양식에서 음수 입력을 방지 할 수 있습니다.

<input type="number" onkeyup="if(this.value<0){this.value= this.value * -1}">

시험

<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">

텍스트 입력 이 필요한 경우 패턴도 작동합니다

<input type="text" pattern="\d+">

입력 작업이지만 복사 및 붙여 넣기 작업이 아닌 완벽한 솔루션을 찾을 수 없으며 일부는 다른 방법입니다. 이 솔루션은 저에게 효과적입니다. "e"를 입력하고 "e"텍스트를 복사하여 붙여 넣습니다.

함수를 만듭니다.

<script language="JavaScript">

  // this prevents from typing non-number text, including "e".
  function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    let charCode = (evt.which) ? evt.which : evt.keyCode;
    if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
      evt.preventDefault();
    } else {
      return true;
    }
  }
</script>

이 속성을 입력에 추가하십시오. 이 두 가지는 "e"를 포함하여 숫자가 아닌 텍스트를 복사하여 붙여 넣을 수 없습니다. 효력을 발휘하려면 둘 다 함께 있어야합니다.

<input type="number" oninput="validity.valid||(value='');" onpress="isNumber(event)" />

Vue 를 사용하는 경우 여기에서이 답변을 참조 할 수 있습니다 . 재사용 할 수있는 믹스 인으로 추출했습니다.

이 코드를 입력 유형에 추가하십시오.

onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"

예를 들면 다음과 같습니다.

<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />

다른 해결책은 J를 사용하여 긍정적으로 만드는 것입니다 (최소 옵션은 비활성화 할 수 있으며 사용자가 smth를 입력하면 유효하지 않습니다) 부정적 if가 필요하지 않고 on ( 'keydown') 이벤트도 사용할 수 있습니다!

let $numberInput =  $('#whatEverId');
$numberInput.on('change', function(){
    let numberInputText = $numberInput.val();
    if(numberInputText.includes('-')){
        $numberInput.val(Math.abs($numberInput.val()));
    }
});

int 또는 float 필드를 원하는지 여부에 따라 다릅니다. 두 사람의 모습은 다음과 같습니다.

<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">

int 필드의 최소값은 1이므로 올바른 유효성 검사가 첨부되어 있습니다. 그러나 float 필드는 0을 허용합니다. 이를 처리하기 위해 하나 이상의 제약 조건 유효성 검사기를 추가 할 수 있습니다 .

function checkIsPositive(e) {
  const value = parseFloat(e.target.value);
  if (e.target.value === "" || value > 0) {
    e.target.setCustomValidity("");
  } else {
    e.target.setCustomValidity("Please select a value that is greater than 0.");
  }
}

document.getElementById("float-field").addEventListener("input", checkIsPositive, false);

여기 JSFiddle.

이러한 솔루션 중 어느 것도 사용자가 유효하지 않은 입력을 입력하는 것을 완전히 막을 수는 없지만 사용자가 유효한 입력을 입력했는지 여부를 호출 checkValidity하거나reportValidity 파악할 수 있습니다 .

물론 사용자는 항상 클라이언트 쪽 유효성 검사를 무시할 수 있으므로 서버 쪽 유효성 검사를 수행해야합니다.

이 시도:

• Angular 8에서 테스트
• 값은 양수
• 이 코드는 또한 처리 null및 negitive값입니다.

              <input
                type="number"
                min="0"
                (input)="funcCall()" -- Optional
                oninput="value == '' ? value = 0 : value < 0 ? value = value * -1 : false"
                formControlName="RateQty"
                [(value)]="some.variable" -- Optional
              />

음수를 입력하려고하면 onkeyup 이벤트가이를 차단하고 입력 번호에 화살표를 사용하면 onblur 이벤트가 해당 부분을 해결합니다.

<input type="number" 
    onkeyup="if(this.value<0)this.value=1"
    onblur="if(this.value<0)this.value=1"
>

텍스트 유형의 입력을 사용하면 더 나은 유효성 검사를 위해이를 사용할 수 있습니다.

return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();

이 시도:

Yii2 : Validation rule 

    public function rules() {
    return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
        ];
}