HTML 텍스트 입력은 숫자 입력만 허용

HTML 텍스트 입력은 숫자 입력만 허용

입력HTML 입력)을 빠르게 설정하는 방법이 ?<input type=text />★★★★★★★★★★★★★★★★★★★★★?만 허용합니다.

^{주의: 이것은 업데이트된 답변입니다.아래의 코멘트는, 키 코드에 문제가 있는 구버전을 나타내고 있습니다.}

자바스크립트

JSFiddle에서 직접 사용해 보세요.

할 수 .<input>과 같이setInputFilter기능(Copy+Paste, Drag+Drop, 키보드숏컷, 컨텍스트메뉴 조작, 입력 불가 키, 캐럿 위치, 다른 키보드 레이아웃, 유효성 오류 메시지 및 IE 9 이후의 모든 브라우저를 지원합니다):

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter, errMsg) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
    textbox.addEventListener(event, function(e) {
      if (inputFilter(this.value)) {
        // Accepted value
        if (["keydown","mousedown","focusout"].indexOf(e.type) >= 0){
          this.classList.remove("input-error");
          this.setCustomValidity("");
        }
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        // Rejected value - restore the previous one
        this.classList.add("input-error");
        this.setCustomValidity(errMsg);
        this.reportValidity();
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        // Rejected value - nothing to restore
        this.value = "";
      }
    });
  });
}

해서 '어울리다'를 할 수 되었습니다.setInputFilter" " " 력력터: 。

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
}, "Only digits and '.' are allowed");

원하는 스타일을 입력 오류 클래스에 적용합니다.다음은 제안입니다.

.input-error{
  outline: 1px solid red;
}

자세한 입력 필터 예는 JSFiddle 데모를 참조하십시오.또, 서버측의 검증도 실시할 필요가 있습니다.

타입 스크립트

이것은 TypeScript 버전입니다.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean, errMsg: string): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

j쿼리

여기에는 jQuery 버전도 있습니다.이 답을 보세요.

HTML 5

에는 HTML 5의 .<input type="number">(사양 참조) 단, 브라우저 지원은 다양합니다.

• 대부분의 브라우저는 양식을 제출할 때만 입력의 유효성을 확인하고 입력할 때는 유효성을 검사하지 않습니다.
• 대부분의 모바일 브라우저는step,min ★★★★★★★★★★★★★★★★★」max★★★★★★ 。
• Chrome에서는 Chrome(버전71.0.3578.98)의 할 수 .e ★★★★★★★★★★★★★★★★★」E현장에 투입됩니다.이 질문도 참조해 주세요.
• Firefox(버전 64.0) 및 Edge(EdgeHTML 버전 17.17134)에서는 사용자가 필드에 텍스트를 입력할 수 있습니다.

w3schools.com에서 직접 사용해 보십시오.

이 DOM 사용

<input type='text' onkeypress='validate(event)' />

그리고 이 대본은

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

다음은 소수점 하나만을 사용할 수 있는 간단한 예입니다.

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');" />

아래에 코멘트한 바와 같이 위의 솔루션은 선행 0을 처리하지 않습니다.특정 사용 사례에서 허용되지 않는 경우 위의 패턴에 다음과 같이 추가할 수 있습니다.

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1').replace(/^0[^.]/, '0');" />

하면 할 수 있다0.123 ★★★★★★★★★★★★★★★★★」.123 아니다0123 ★★★★★★★★★★★★★★★★★」00.123.

대한 답을 찾기 위해 는 꼭 한 것이 있다.<input type="number"그러나 그 외에는 다음 두 가지 방법이 가장 간결합니다.

<input type="text" 
           onkeyup="this.value=this.value.replace(/[^\d]/,'')">

삭제되기 전에 잠깐 동안 허용되지 않는 문자가 표시되는 것이 싫다면, 아래의 방법이 저의 해결책입니다.이는 모든 종류의 네비게이션과 단축키를 비활성화하지 않기 위한 추가 조건입니다.이것을 압축하는 방법을 아는 사람이 있으면 알려주세요!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

대부분의 답변에는 주요 이벤트를 사용하는 약점이 있습니다.

대부분의 답변은 키보드 매크로, 복사+붙여넣기 및 불필요한 동작을 통해 텍스트 선택을 할 수 있는 능력을 제한합니다.또 다른 답변은 특정 jQuery 플러그인에 의존하는 것처럼 보입니다.이것은 기관총으로 파리를 죽이는 것입니다.

이 심플한 솔루션은 입력 메커니즘(키 스트로크, 복사+붙여넣기, 오른쪽 클릭 복사+붙여넣기, 음성-텍스트 변환 등)에 관계없이 플랫폼 전체에서 가장 적합합니다.텍스트 선택 키보드 매크로는 모두 사용할 수 있으며 스크립트별로 숫자가 아닌 값을 설정하는 기능도 제한됩니다.

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

에는 HTML5가 있습니다.<input type=number>당신에게 맞는 것 같군요.현재는 Opera만 기본적으로 지원하지만 JavaScript를 구현하는 프로젝트가 있습니다.

그리고 한 가지 예를 더 들자면, 이것은 나에게 매우 효과적입니다.

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

키 누르기 이벤트에도 연결

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

jsFiddle의 예를 다음에 나타냅니다.

HTML5는 정규식을 지원하므로 다음을 사용할 수 있습니다.

<input id="numbersOnly" pattern="[0-9.]+" type="text">

경고: 일부 브라우저는 아직 이 기능을 지원하지 않습니다.

여기서 언급한 두 가지 답을 조합하여 사용하기로 했습니다.

<input type="number" />

그리고.

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

<input type="text" onkeypress="return isNumberKey(event);">

자바스크립트

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

쉼표, 마침표 및 마이너스(-)를 추가할 수 있습니다.

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

HTML

<input type="text" onkeydown="validateNumber(event);"/ >

2가지 솔루션:

양식 검증기 사용(예: jQuery 유효성 검사 플러그인)

입력 필드의 onblur(즉, 사용자가 필드를 나갈 때) 이벤트 중에 정규식을 사용하여 확인합니다.

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

// JavaScript 함수(HTML 또는 PHP 사용 가능)

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

입력 양식:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

입력 최대값 포함(위의 번호에서는 12자리 숫자 사용 가능)

보다 안전한 방법은 키 프레스를 하이잭하여 키 코드를 필터링하는 대신 입력 값을 확인하는 것입니다.

이렇게 하면 키보드 화살표, 수정자 키, 백스페이스, 삭제, 비표준 키보어 사용, 마우스 붙여넣기, 드래그 앤 드롭 텍스트 사용, 접근성 입력까지 자유롭게 사용할 수 있습니다.

아래 스크립트는 양수 및 음수를 허용합니다.

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

편집: 나는 오래된 답변이 이제 구식이라고 생각하기 때문에 그것을 삭제했다.

패턴은 다음과 같이 사용할 수 있습니다.

<input id="numbers" pattern="[0-9.]+" type="number">

모바일 웹 사이트 인터페이스 팁 전체를 볼 수 있습니다.

아래에 언급된 해결책을 찾아보세요.합니다.numeric가 값을 매길 수 . 사용자도 할 수 없습니다.copy,paste,drag ★★★★★★★★★★★★★★★★★」drop★★★★★★ 。

사용 가능한 문자

0,1,2,3,4,5,6,7,8,9

이벤트를 통해 허용되지 않는 문자 및 문자

• 알파벳 값
• 특수 문자
• 알았다.
• 붙여넣기
• 드래그
• 떨어지다

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

안 되면 알려주세요.

입력 필드에 숫자만 추가할 수 있고, 글자는 입력할 수 없는 예도 있습니다.

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

또는 는, 「(휴대전화)」를 사용할 수 .<input type="number">.

이벤트를 보는 대신 jQuery와 replace()를 사용한 짧고 달콤한 구현입니다.keyCode 또는 이벤트.이 경우:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

입력된 문자가 순간적으로 나타나는 작은 부작용만 있으며 CTRL/CMD + A가 약간 이상할 수 있습니다.

JavaScript 코드:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

HTML 코드:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

는 백스페이스 키코드가 8이고 regex 식에서는 사용할 수 없기 때문에 버그를 회피하는 간단한 방법입니다.

type="number"를 사용하면 대부분의 브라우저에서 이 속성을 지원할 수 있습니다.

<input type="number" maxlength="3" ng-bind="first">

이 문제를 해결하는 간단한 방법은 jQuery 함수를 구현하여 텍스트 상자에 입력된 문자를 regex로 검증하는 것입니다.다음은 예를 제시하겠습니다.

HTML 코드:

<input class="integerInput" type="text">

js 함수는 jQuery를 사용하여

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });

<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		

input type="number"HTML5 の 다다다다다다 。

그 외의 경우는, 다음과 같이 도움이 됩니다.

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

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

jQuery를 사용하는 다른 변종일 뿐입니다.

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

좋은 답변도 몇 가지 보았지만, 가능한 한 작고 심플한 것이 좋기 때문에, 누군가 이익을 얻을지도 모릅니다. javascript를 합니다.Number() ★★★★★★★★★★★★★★★★★」isNaN하다

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

이게 도움이 됐으면 좋겠다.

다음과 같이 입력 값(기본적으로 문자열로 처리됨)을 숫자로 강제된 값과 비교할 수도 있습니다.

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

단, 키업 등의 이벤트에 바인드해야 합니다.

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

보다 나은 사용자 환경을 위한 솔루션:

HTML

<input type="tel">

j쿼리

$('[type=tel]').on('change', function(e) {
  $(e.target).val($(e.target).val().replace(/[^\d\.]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
  keys = ['0','1','2','3','4','5','6','7','8','9','.']
  return keys.indexOf(event.key) > -1
})

세부사항:

먼저 입력 유형:

number는 실제 공간을 하는 위쪽을 이 됩니다.tel, 없이 을 나타냅니다.

[number / tel]을 사용하면 모바일 기기에 숫자 키보드를 표시할 수도 있습니다.

JS 검증에서는, 통상의 유저 입력(키 누르기)과 카피+붙여넣기(변경)의 2개의 기능이 필요하게 되었습니다만, 그 외의 조합으로 유저 익스피리언스가 나빠집니다.

신뢰성이 높은 키보드 이벤트를 사용합니다.KeyboardEvent.charCode 대신 키를 누릅니다.

또한 브라우저 지원에 따라서는 이름이 좋지 않은 Array.protype.indexOf() 대신 Array.protype.includes()를 사용하는 것을 검토할 수 있습니다(참/잘못된 결과).

다음 DOM 사용:

<input type = "text" onkeydown = "validate(event)"/>

그리고 이 스크립트는

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

...또는 이 스크립트(indexOf 없음, 2개 사용)for의...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

onkeypress 속성보다 onkeydown 속성이 먼저 확인되기 때문에 onkeypress 대신 onkeydown 속성을 사용했습니다.구글 크롬 브라우저에 문제가 있을 수 있습니다.

"onkeypress" 속성을 사용하면 Google chrome의 "preventDefault"를 사용하여 Tab을 제어할 수 없지만, "onkeydown" 속성을 사용하면 Tab을 제어할 수 있습니다.

탭의 ASCII 코드 = > 9

첫 번째 스크립트는 두 번째 스크립트보다 코드가 적지만 ASCII 문자 배열에 모든 키가 있어야 합니다.

두 번째 스크립트는 첫 번째 스크립트보다 훨씬 크지만 어레이에 모든 키가 필요한 것은 아닙니다.배열의 각 위치에 있는 첫 번째 숫자는 각 위치를 읽는 횟수입니다.각 판독치에 대해 다음 판독치까지 1씩 증가합니다.예를 들어 다음과 같습니다.




= 0NCound = 0

48 + NCout = 48

NCont + +

48 + NCout = 49

NCont + +

...

+ = 48 + NCout = 57




숫자 키의 경우 10(0~9)에 불과하지만 100만 개일 경우 이러한 키를 모두 사용하여 배열을 작성하는 것은 의미가 없습니다.

ASCII 코드:

• 8 ==> (백스페이스);
• 46 => (삭제);
• 37 => (왼쪽 화살표);
• 39 => (오른쪽 화살표);
• 48 - 57 => (표준);
• 36 => (홈);
• 35 => (종료);

이 기능은 다음과 같이 개선되었습니다.

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

여기 React 사용자 전용의 간단한 솔루션이 있습니다.더 좋은 솔루션을 찾지 못하고, 독자적인 솔루션을 만들었습니다.3단계.

먼저 상태를 만듭니다.

const [tagInputVal, setTagInputVal] = useState("");

다음 합니다.value={tagInputVal}합니다.onChange핸들러

<input id="tag-input" type="text" placeholder="Add a tag" value={tagInputVal} onChange={(e) => onChangeTagInput(e)}></input>

다음, 이벤트 해 주세요.onChange핸들러

function onChangeTagInput(e) {
    setTagInputVal(e.target.value.replace(/[^\d.]/ig, ""));
}

언급URL : https://stackoverflow.com/questions/469357/html-text-input-allow-only-numeric-input