2013-06-18 2 views
7

숫자 유형의 필드에 쓰는 것을 금지하고 문자열 데이터를 피하고 숫자 만 쓰려면 스크롤 막대 만 사용하는 방법을 원하십니까?입력 유형 번호 HTML5에 쓰지 않음

<form> 
<input type="number" path="note" min="1" max="20"/> 
</form> 
+0

이, 난 내가하고 싶은 것은, 유형 번호의 입력 분명 같은 일을 생각하고 있습니다 숫자 데이터 만 허용하여 스크롤 막대 만 사용 가능하게합니다. – Somar

+0

'readonly' 속성을 사용할 수 없습니까? 유형 번호 –

+0

@Souad '입력 유형 번호 HTML5 작성 금지'의 경우 지원됩니다. 질문의 제목을 변경해야합니다. 오도 된 내용입니다. – NetStarter

답변

19

jQuery를 사용할 수 있거나 허용 한 경우 type='number'에서 keypress을 사용 중지 할 수 있습니다.

$("[type='number']").keypress(function (evt) { 
    evt.preventDefault(); 
}); 

입력시 위쪽 및 아래쪽 화살표를 사용할 수 있지만 키보드 입력은 허용되지 않습니다.

+0

예! 그게 내가 원하는거야. 고마워요 – Somar

+0

어쩌면 뭔가가 13 년부터 바뀌 었습니다. 이제는 키 입력이 키에 대해 작동하지 않을 것입니다. 삭제 및 백 스페이스, 이것은 모든 사용자가 값을 삭제할 것이고, 모든 것을 커버하는 keydown을 사용합니다. –

-1

첫째, 마크 업이 잘못되었습니다. 양식 태그 입력 태그로 묶어야합니다 : 당신은 HTML5를 사용하여 숫자 입력을 원하는 경우, 둘째

<form name="my_form"> 
    <input ...code... 
    <input ...code... 
</form> 

을, 당신은이를 사용할 수 있습니다

<input type="number" name="my_number" min="0" max="100" step="1" value="50"/> 

(W3Schools에서하는) 수 "숫자"입력의 현재 브라우저 구현이 다양하다는 것을 알고 있어야합니다.

그런 다음 Javascript를 사용하여 값을 참조하거나 양식을 사용하여 게시해야합니다.

+0

... "스크롤 막대"에 관해서는, 무슨 뜻인지 모르겠다! – TheTurkey

+0

양식 : 입력이 올바른 봄 태그입니다. 답변을 주셔서 감사합니다 – Somar

+0

그냥 코멘트 .. W3Schools를 신뢰하지 마세요 ... http://w3fools.com/ –

0

아니요 숫자가 증가하지 않고 최대 길이가 제공되고 붙여 넣기가 없습니다.

아래의 피들 (Fiddle)을 확인하십시오. 유형 번호 양식 필드에 필요한 기능이 있습니다.

HTML

<form class="form-horizontal home" role="form" action="" method="post" id="payment-form" novalidate="novalidate"> 
<label for="number">Mobile number : </label> 
<input class="form-control" id="number" name="number" type="number" data-rule-required="true" aria-required="true" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;"> 
</form> 

CSS

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
} 

DEMO - JSFIDDLE