Question

https://www.w3schools.com/tags/att_input_type_number.asp

我们有一个输入类型编号。如果用户键入“ 23”并按Enter，则将显示第23页。我用一个keydown函数来处理它，该函数检查输入字段的值= $（“＃pageFld”）。

但是我在设置+ / i按钮时遇到问题。我们之前在“输入”上处理了这个问题。但是添加此功能还可以为输入字段添加功能。

例如，如果我再次尝试键入“ 23”，则输入“ 2”时它将滚动。我们还希望滚动仅在按下Enter键时才在输入字段上发生。

如何在处理输入字段和处理+ / i按钮的代码之间进行区分？

用于处理Enter键的代码。

$(document).keydown(function(e){
    switch (e.which){
        case 13:    //enter key (for Page scroll)            
            $("#bookComponent").turn("page", $("#pageFld").val());
            break;
    }
});

应该处理+/-按钮但当前也影响输入字段的代码：

    $("#pageFld").on('input', function(){
        $("#bookComponent").turn("page", $(this).val());
    });

Answer 1

找到了一个不错的解决方案。

对于+ / i
$（“＃pageFld”）。on（'mouseup'，function（）{...};

用于输入字段
$（“＃pageFld”）。on（'keypress'，function（e）{if（e.which === 13）{..} ..}

Answer 2

您可以将输入更改为change和mouseup事件的组合。

$("#pageFld").keydown(function(e){
    switch (e.which){
        case 13:    //enter key (for Page scroll)            
            $("#bookComponent").turn("page", $("#pageFld").val());
            break;
    }
}); 



 $("#pageFld").on('change.mouseup', function(){
        $("#bookComponent").turn("page", $(this).val());
 });

在这种情况下，我将选择器从文档更改为该输入ID，它将在mouseup上检测到并且值被更改。

如何在输入类型=数字上设置加/减按钮？

2 个答案: