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.
JavaScript
x
3
1
$('.input-date input').on('mousewheel', function (event) {
2
event.preventDefault();
3
});
JavaScript
1
21
21
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
3
<script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.6/dev/polyfiller.js"></script>
4
5
<script type="text/javascript">
6
webshims.cfg.no$Switch = true;
7
webshim.setOptions({
8
'forms-ext': {
9
widgets: {
10
calculateWidth: false
11
}
12
}
13
});
14
webshim.polyfill('forms forms-ext');
15
</script>
16
17
<form>
18
<div class="input-date">
19
<input type="date" value="2015-02-24">
20
</div>
21
</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:
JavaScript
1
3
1
$('.input-date input').on('mousewheel', function (event) {
2
event.preventDefault();
3
});
JavaScript
1
24
24
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>
3
<script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.6/dev/polyfiller.js"></script>
4
5
<script type="text/javascript">
6
webshims.cfg.no$Switch = true;
7
webshim.setOptions({
8
'forms-ext': {
9
widgets: {
10
calculateWidth: false
11
},
12
date: {
13
noSpinbtn: true
14
}
15
}
16
});
17
webshim.polyfill('forms forms-ext');
18
</script>
19
20
<form>
21
<div class="input-date">
22
<input type="date" value="2015-02-24">
23
</div>
24
</form>