Firefox:禁用HTML5日期输入上的滚动具有webshim后备

问题描述:

我试图没有成功禁用HTML5日期输入上的滚动。
此输入有一个webshim回退,这导致我的JS与Chrome,但不是Firefox。Firefox:禁用HTML5日期输入上的滚动具有webshim后备

$('.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>

有谁曾经面临过这样的问题?

我有机会与webshim的作者讨论这个问题,并发现有一个选项可用来避免这种问题:noSpinbtn

这样,代码将是这样的:

$('.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>