2013-06-18 36 views
7

Tôi muốn tắt tính năng ghi vào trường số kiểu, để tránh dữ liệu chuỗi và chỉ ghi số, vậy làm cách nào để bật thanh cuộn?Tắt viết trong số loại đầu vào HTML5

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

hai được điều tương tự, tôi nghĩ rằng những gì tôi muốn làm là rõ ràng, đầu vào của số loại chỉ cho phép dữ liệu số để chỉ bật thanh cuộn – Somar

+0

Bạn không thể sử dụng thuộc tính 'readonly'? Nó được hỗ trợ cho loại số –

+0

@Souad 'vô hiệu hóa văn bản trong số loại đầu vào HTML5' bạn phải thay đổi tiêu đề của câu hỏi của bạn nó là gây hiểu lầm. – NetStarter

Trả lời

19

Nếu bạn có thể/được phép sử dụng jQuery, bạn có thể tắt keypress trên type='number'.

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

Điều này cho phép bạn sử dụng mũi tên lên và xuống trên đầu vào nhưng không cho phép nhập bằng bàn phím.

+0

CÓ !! Đó là những gì tôi đang tìm kiếm. Cảm ơn bạn – Somar

+0

Có thể có điều gì đó đã thay đổi kể từ '13, bây giờ nhấn phím sẽ không hoạt động đối với các phím Delete và Backspace, tất cả người dùng này sẽ xóa giá trị, tôi đã sử dụng phím tắt bao gồm tất cả –

-1

Thứ nhất, đánh dấu của bạn không chính xác. Các thẻ hình thức phải bao quanh thẻ đầu vào:

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

Thứ hai, nếu bạn đang sử dụng HTML5 và muốn có một đầu vào số, bạn có thể sử dụng này:

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

(từ W3Schools)

Be lưu ý rằng việc triển khai trình duyệt hiện tại của đầu vào "số" thay đổi.

Sau đó, bạn tham chiếu giá trị bằng cách sử dụng Javascript hoặc đăng nó bằng cách sử dụng biểu mẫu.

+0

... về phần "thanh cuộn", tôi không chắc ý bạn là gì! – TheTurkey

+0

hình thức: đầu vào là một thẻ mùa xuân nó là chính xác. cảm ơn cho câu trả lời – Somar

+0

Chỉ cần một bình luận .. Đừng bao giờ tin tưởng W3Schools ... http://w3fools.com/ –

0

Không cuộn, không tăng số lượng, độ dài tối đa được cung cấp, không dán bản sao.

Kiểm tra Fiddle bên dưới, có các tính năng cần thiết trong trường biểu mẫu số loại.

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

Các vấn đề liên quan