Có thể vô hiệu hóa 'bước' trong số kiểu đầu vào

Question

Tôi muốn biết liệu có thể ghi đè hành vi bước của trình duyệt hay chặn và thay đổi giá trị bước trước khi bước hay ngăn chặn bước xảy ra như một hàm cho kiểu đầu vào con số.

Ví dụ: khi tăng dần bằng cách sử dụng mũi tên tăng/giảm tăng/giảm/di chuyển bước vv, tôi muốn thao tác quá trình bước trước khi nó xảy ra.

ví dụ:

<input type="number" min="1.01" max="1000" id="num"/> 

Tôi đã cố gắng không đưa ra một thuộc tính bước. Điều này đã không hoạt động.

Thuộc tính bước chỉ lấy giá trị 'tất cả' và số, giá trị này không sai.

Vì vậy, tôi không thể tắt tính năng này bằng bất kỳ thuộc tính nào. Tôi cũng đã thử chạy các chức năng stepUp, stepDown nhưng không được gọi khi chức năng bước của trình duyệt đang diễn ra.

Tôi về cơ bản muốn nó không phải là bước hoặc nếu nó bước, sau đó làm một chức năng bước tùy chỉnh, trong đó tôi quyết định giá trị bước dựa trên giá trị hiện tại của nó.

Tôi đã thử sửa đổi về thay đổi, nhưng điều này dường như không hoạt động cho bước hiện tại, chỉ cho bước tiếp theo.

Đây là javascript:

$("#num").on("keyup change focusin focusout", function (e) { 
    $(this).attr("step", getStep($(this).val())); 
}); 

function getStep (val) { 
    val = parseFloat(val); 
    var step = 1; 
    if (val < 5) { 
     console.log('here'); 
     step = 2; 
    } else if (val < 10) { 
     step = 5; 
    } 
    return step; 
} 

http://jsfiddle.net/urrLmm4L/

đây nếu tôi nhập 5 nó sẽ tăng lên 5, nhưng nó increments bằng 1. Tiếp theo thời gian nó increments bởi 5. Tôi muốn ghi đè giá trị bước trước khi bước nếu có thể.

Tôi không cố gắng giải quyết vấn đề này bằng cách sử dụng kiểu nhập văn bản, tôi đang cố xác định xem có phương tiện để ghi đè chức năng bước.

Answer 1

Không chắc chắn nếu đây là những gì bạn đang tìm kiếm nhưng tôi sẽ dùng thử.

WebKit trình duyệt dành cho máy tính để bàn thêm mũi tên lên xuống để nhập số đầu vào được gọi là người quay. Bạn có thể tắt chúng bằng mắt như thế này:

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

Nguồn: https://css-tricks.com/snippets/css/turn-off-number-input-spinners/

EDIT

Giải quyết nó! Đây là fiddle

http://jsfiddle.net/649d66bb/

$(document).ready(function() { 
    $("input[type=number]").on("focus", function() { 
     $(this).on("keydown", function(event) { 
      if (event.keyCode === 38 || event.keyCode === 40) { 
       event.preventDefault(); 
      } 
     }); 
    }); 

});