HTML5事件监听器用于数字输入滚动-仅适用于Chrome。

8 浏览
0 Comments

HTML5事件监听器用于数字输入滚动-仅适用于Chrome。

我正在尝试使用一些HTML5元素，并遇到了一个有趣的行为。这只在Chrome浏览器中有效。\n使用输入类型为number，您可以设置最小值、最大值和步长，并获得上下箭头来控制输入。 \n我发现绑定点击事件监听器会捕捉箭头的按下，因为在字段失去焦点之前不会实际发生更改。您还可以使用键盘上的上下箭头键在限制范围内更改值，并且可以通过键盘按键绑定来捕捉到这些事件。\n然而，在Chrome浏览器中，您还可以使用鼠标滚轮来更改输入值，只需将鼠标悬停在输入框上并滚动即可。然而，我尚未找到一种监听此事件的方法。\n在jsfiddle上的示例\nHTML：\n

\nJavaScript（使用jQuery）：\n

$( '#test' ).click(function(){
   $( this ).after( 'click' ); 
});
$( '#test' ).change(function(){
   $( this ).after( 'change' ); 
});
$( '#test' ).keypress(function(){
   $( this ).after( 'keypress' ); 
});

\n有没有办法监听滚动更改？再次强调，这仅适用于目前的Chrome版本。

0

1 答案

0 Comments

HTML5的number input在Chrome浏览器中，滚动事件监听器不起作用。这个问题的解决方法是使用jQuery Mouse Wheel插件。下面的代码演示了如何使用该插件来监听鼠标滚轮事件，并在滚动时向元素后插入一行文本。

$( '#test' ).mousewheel(function(){
   $( this ).after( 'mouse wheel' ); 
});

此外，如果不想每次缺少功能时都导入插件，可以使用原生的监听器来实现。下面的代码演示了如何使用原生的事件监听器来监听鼠标滚轮事件，并在滚动时向元素后插入一行文本。

$('#test')[0].addEventListener('mousewheel', function(){
    $('#test').after( 'scroll' );
});

以上就是解决HTML5 number input在Chrome浏览器中滚动事件监听器不起作用的方法。

0