I’m trying without success to disable scroll on an HTML5 date input.
This input has a webshim fallback, which cause my JS to works with Chrome, but not Firefox.
$('.input-date input').on('mousewheel', function (event) { event.preventDefault(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.6/dev/polyfiller.js"></script> <script type="text/javascript"> webshims.cfg.no$Switch = true; webshim.setOptions({ 'forms-ext': { widgets: { calculateWidth: false } } }); webshim.polyfill('forms forms-ext'); </script> <form> <div class="input-date"> <input type="date" value="2015-02-24"> </div> </form>
Does anyone ever faced this issue?
Advertisement
Answer
I had the opportunity to discuss of this problem with webshim’s author, and it was found that an option is available to avoid this kind of problem: noSpinbtn
.
Thus, the code will looks like this:
$('.input-date input').on('mousewheel', function (event) { event.preventDefault(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.6/dev/polyfiller.js"></script> <script type="text/javascript"> webshims.cfg.no$Switch = true; webshim.setOptions({ 'forms-ext': { widgets: { calculateWidth: false }, date: { noSpinbtn: true } } }); webshim.polyfill('forms forms-ext'); </script> <form> <div class="input-date"> <input type="date" value="2015-02-24"> </div> </form>