Loại đầu vào HTML5 = hành vi bước thay đổi số

Question

Nếu tôi sử dụng trường nhập kiểu = "number" với bước = "100". Tôi không muốn số lẻ không hợp lệ. Tôi chỉ muốn tăng hoặc giảm đến được với một giá trị của 1000.

<input type="number" min="100" max="999999" step="100" /> 

Nếu người dùng nhập giá trị "199" và nộp, anh/cô ấy được một lỗi bởi vì giá trị không phải là dividable 100. Nhưng tất cả những gì tôi muốn với giá trị bước là để kiểm soát hành vi của máy quay, ví dụ nếu người dùng nhấp lên, tôi muốn giá trị 199 trở thành 200 và nếu người đó nhấp vào tôi muốn nó trở thành 100. Hoặc lý tưởng tôi muốn giá trị được tăng hoặc giảm với giá trị 100.

Cách Tôi có làm điều này không? tôi đã cố gắng sử dụng các sự kiện không hợp lệ (với jQuery 1.7.2) như thế này:

$("[type='number']").bind('invalid', function(e) { 
    var el = $(this), 
     val = el.val(), 
     min = el.attr('min'), 
     max = el.attr('max'); 

    if (val >= min && val <= max) { 
     return false; 
    } 
}); 

Nhưng kết quả này theo hình thức không được nộp.

PS .: Đây là trong Google Chrome 20.0.1132.57 trên Fedora 16.

Answer 1

Tôi không nghĩ rằng bạn có thể, các step và xác nhận là closely tied together. Trong tương lai, bạn có thể ghi đè lên số stepUp() and stepDown() functions để nhận hành vi mà bạn mô tả nhưng tôi đã không nghiên cứu nếu đây là trường hợp sử dụng dự định cho những điều này. Tôi khuyên bạn nên đăng bài trên số WHATWG mailing list, yêu cầu cụ thể về các chức năng đó và mô tả trường hợp sử dụng của bạn.

Vì mục đích thực tế hiện tại, bạn đã thử đặt step=1 và ràng buộc với sự kiện click để nắm bắt? Tôi có thể thấy có thể sẽ có vấn đề với việc phân biệt giữa các nhấp chuột 'lên' và 'xuống' nhưng điều đó có thể khắc phục được. Nó có thể dễ dàng hơn tất cả các vòng tuy nhiên để sử dụng một đầu vào text, đặt thuộc tính pattern một cách thích hợp và thực hiện spinner của riêng bạn.

Answer 2

Chỉ với bước nhưng bạn có thể sử dụng nhiều và thêm dấu ngoặc để trượt

như

<input type='range' min ='0' max='50' step='1' name='slide' list="settings" onchange="updateTextInput(this.value);"> 
<datalist id="settings"> 
<option>15</option> 
<option>20</option> 
<option>26</option> 
<option>36</option> 
<option>50</option> 
</dataList> 

sau đó sử dụng javascript để kiểm tra giá trị gần và đặt nó

<script type="text/javascript"> 
function updateTextInput(val) { 
if(val>1) 
     document.getElementById('textInput').value=15; 
if(val>15) 
     document.getElementById('textInput').value=20; 
if(val>20) 
     document.getElementById('textInput').value=26; 
//... 
    } 
    </script>