입력 유형 Number에서 +,-e를 차단하는 방법

입력 유형 Number에서 +,-e를 차단하는 방법

입력할 때 문자 번호를 입력합니다.e입력 필드에는 특수 문자도 표시됩니다.숫자만 표시합니다.어떻게 막아요?

<input type="number">

수신 키 값이 마음에 들지 않으면 기본 동작을 방지해 보십시오.

document.querySelector(".your_class").addEventListener("keypress", function (evt) {
    if (evt.which != 8 && evt.which != 0 && evt.which < 48 || evt.which > 57)
    {
        evt.preventDefault();
    }
});

// 0 for null values
// 8 for backspace 
// 48-57 for 0-9 numbers

<input type="number" class="your_class">

리액트에서 사용한 간단한 솔루션.

onKeyDown={(evt) => ["e", "E", "+", "-"].includes(evt.key) && evt.preventDefault()}

이러한 문자 입력을 차단할 수 있습니다.keydown이벤트

var inputBox = document.getElementById("inputBox");

var invalidChars = [
  "-",
  "+",
  "e",
];

inputBox.addEventListener("keydown", function(e) {
  if (invalidChars.includes(e.key)) {
    e.preventDefault();
  }
});

<input type="number" id="inputBox" />

그러나 사용자가 복사/복사(또는 콘솔을 통해)를 수행해도 입력할 수 있습니다.복사/붙여넣기를 방지하기 위해 입력된 값을 대체할 수 있습니다.

var inputBox = document.getElementById("inputBox");

var invalidChars = [
  "-",
  "+",
  "e",
];

inputBox.addEventListener("input", function() {
  this.value = this.value.replace(/[e\+\-]/gi, "");
});

inputBox.addEventListener("keydown", function(e) {
  if (invalidChars.includes(e.key)) {
    e.preventDefault();
  }
});

<input type="number" id="inputBox" />

---

* 입력필드에 입력된 값은 숫자로 설정된 유형으로는 실제로 얻을 수 없습니다.입력된 값은 숫자, 즉 내부 번호 체크를 통과한 값이면 얻을 수 있습니다.사용자가 복사/붙여넣는 경우1e, 제안된 솔루션은 실패합니다.

입력 시 발생하는 동작1e즉, 입력필드는 그것이 숫자인지 아닌지를 확인하고, 그것이 숫자가 아닌지를 확인합니다(1eis not)이 경고합니다.

지정한 값 "1e"는 올바른 숫자가 아닙니다.값은 -?(\d+|\d+) 정규식과 일치해야 합니다.\d+|.\d+([E][-+] :\d+?

및 그value속성이 로 설정됩니다."".

필드의 속성을 확인하면valueAsNumber소유물.입력된 값이 숫자일 경우 입력 필드에 의해 값이 해석되어 저장됩니다.valueAsNumber.부터1e숫자가 아니라 로 평가됩니다.NaN,그리고.NaN에 할당되어 있다.valueAsNumber그리고.value로 설정되어 있다.""아직 보고 계시지만1e[ Input ]필드에 표시됩니다.

저는 이 문제와 관련된 질문을 했지만, 아직 해결 방법이 없습니다.

구문 분석된 값이 아닌 숫자 입력 필드에 입력된 값을 가져옵니다.

값을 차단하는 대신 숫자가 아닌 값을 대체할 수 있습니다.

키코드를 처리하도록 선택할 경우,numKeys,numPad,shift +,crtl +텍스트 상자 안에 포커스가 있는 동안 새로 고침 시도도 실패합니다.기본값 방지에서는 잘못된 값보다 훨씬 더 많이 중지됩니다.

$("#input").on("input", function() {
  var nonNumReg = /[^0-9]/g
  $(this).val($(this).val().replace(nonNumReg, ''));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" id="input" />
<div class="alert"></div>

위의 답변에서 나온 양식에 따라 위의 예제의 대부분이 기재되어 있습니다.E 를 입력할 때, 이것을 사용할 수 있기 때문에, 이것을 어레이에 추가하는 것이 가장 좋다고 생각합니다.이 예에서는 Jquery 3.3.1을 사용하고 있습니다.

또, 어레이에 입력하는 것에 관계없이, 입력 박스에 입력할 수 없게 됩니다.

참고 - JQuery --> $("input[type='number'])의 유형 번호인 모든 입력에 동일하게 적용할 경우 이 ID를 적용할 요소의 ID로 사용합니다.

var invalidChars = ["-", "e", "+", "E"];

$("input[type='number']").on("keydown", function(e){ 
    if(invalidChars.includes(e.key)){
         e.preventDefault();
    }
}):

위의 샘플은 숫자의 종류를 가진 모든 입력에 대해 작동해야 하며 "-", "e", "+" 및 "E" 문자가 입력에 입력되지 않도록 해야 합니다.

갱신하다

숫자에 유효한 소수점을 나타내므로 '.'를 입력할 수 있습니다.전화번호 확인에 사용했는데 (영국의 경우) '.'가 없는 것이 분명합니다.따라서 배열에 추가할 다른 문자가 있을 수 있습니다.

다음은 다른 솔루션에 기반한 jQuery를 사용한 매우 간결한 솔루션입니다.

$("input[type=number]").on("keydown", function(e) {
        var invalidChars = ["-", "+", "e"]; //include "." if you only want integers
        if (invalidChars.includes(e.key)) {
            e.preventDefault();
        }
});

jQuery를 사용하면 쉽게 할 수 있습니다.

이 코드를 사용해 보세요.

$(function() {
    $("#input").keypress(function(event) {
        if (event.which != 8 && event.which != 0 && (event.which < 48 || event.which > 57)) {
            $(".alert").html("Enter only digits!").show().fadeOut(2000);
            return false;
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="input" />
<div class="alert"></div>

$("#input").on("input", function() {
  var nonNumReg = /[^0-9]/g
  $(this).val($(this).val().replace(nonNumReg, ''));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="tel" id="input" />
<div class="alert"></div>

번호인지 아닌지 확인하실 수 있습니다.

// Restrict e, -, + for html input number
$(document).on('keypress', ':input[type="number"]', function (e) {
    if (isNaN(e.key)) {
        return false;
    }
});

OP의 질문에는 'angularjs'라는 태그가 붙어있기 때문에 가장 깨끗한 해결책은 아마도 지시문을 사용하는 것일 것입니다.이 접근방식에 대한 몇 가지 솔루션에 대해 앞에서 설명한 바 있습니다.

angularjs: 텍스트 상자에 숫자만 입력할 수 있습니다.

JQuery
를 받아들이는 는, 도 있습니다.

$('input[Type="Number"]').keypress(function (e) {
    if ('0123456789'.indexOf(e.key)!=-1){}
    else if (e.key=='.' && this.value!='' && (this.value.match("\.") || []).length==0){}
    else{e.preventDefault();}
});

여기 React 솔루션이 있습니다.이 솔루션이 누군가에게 도움이 되기를 바랍니다.

컨스턴트 번호InputInvalidChars = [-', '+', 'e';

   <input
      type="number"
      onKeyDown={(e) => {
        if (numberInputInvalidChars.includes(e.key)) {
          e.preventDefault();
        }
      }}
    ></input>

onKeyUp, onKeyPress 또는 onKeyDown 이벤트도 동일하게 제한할 수 있습니다.

onKeyDown = {
  (e) => ["e", "E", "+", "-"].includes(e.key) && e.preventDefault()
}

일부 JQuery 코드를 사용하여 차단할 수 있습니다.

 $('input[Type="Number"]').keypress(function (e) {
    if ('0123456789'.indexOf(e.key) == -1) {
        e.preventDefault();
    }
});

이는 모든 숫자 입력에 영향을 미칩니다.

사용 사례에 대한 자세한 내용은 알 수 없지만, 직접 처리하기 위해 많은 작업이 필요하지 않을 수 있습니다.우선 음수를 방지하는 데 사용할 수 있는 최소값과 최대값 및 단계값을 설정할 수 있습니다(필요한 경우).기본 스텝은 1이므로 10진수 스텝 값을 지정하지 않는 한 정수가 필요합니다.

숫자에서 "e"를 처리할 때 Number()를 사용하여 텍스트를 숫자로 변환할 수 있습니다. 그러면 "e"와 "+" 기호가 자동으로 변환됩니다.

> Number("5e3") 
5000
> Number("+42") 
42

송신된 값을 정규화할 필요가 있는 경우는, 원래대로 변환할 수 있습니다.아마 가장 사용하기 쉬운 타이밍은 흐릿한 상태일 것입니다.

input.addEventListener('blur', () => {
  if (input.value !== '' && input.checkValidity()) {
    input.value = Number(input.value);
  }
});

숫자 입력에서 [0-9]와 다른 값을 가진 문자에 대한 이벤트는 다음을 포함하는 개체입니다.

event.target.value: ""

가치가 없는 이벤트를 방지해 주세요.

if (!event.target.value) {
  event.preventDefault();
};

전화번호 필드에 + 서명을 원하는 경우 이 코드를 사용할 수 있습니다.

var inputBox = document.getElementById("inputBox");

var invalidChars = [
  "-",
  "e",
];

inputBox.addEventListener("keydown", function(e) {
  if (invalidChars.includes(e.key)) {
    e.preventDefault();
  }
});

<input type="number" id="inputBox" />

언급URL : https://stackoverflow.com/questions/39291997/how-to-block-e-in-input-type-number