一个更简单且独立的数字选择器？答案

【问题标题】：A simpler and self-contained number picker?一个更简单且独立的数字选择器？
【发布时间】：2018-01-23 10:15:31
【问题描述】：

在为我正在制作的 PhoneGap 应用程序搜索号码选择器 JavaScript 代码时，我遇到了这个：https://plugins.jquery.com/dpNumberPicker/

它可以很好地满足我的需要，但看起来过于复杂。我已经搜索了很多代码，而这个代码是我最需要的。我想知道是否有更简单的方法来实现跨平台（Android 和 iOS）移动就绪（可点击）号码选择器？我需要一些东西可以让我制作一个带有 - 符号的可样式按钮，出现数字的可样式框，以及后面的可样式 + 符号，并且两个按钮可以独立设置样式或共享相同的样式代码，以及 + 和- 样式也可以。

简而言之，这是： [-][0][+]

有没有什么更简单的（如代码行数少得多）可以像 DP Number Picker 那样完成它的工作？这个数字选择器是漂亮的代码，但它是在 2014 年问世的。我希望有一种更简洁、更短的方法来实现这一点。

如果有答案，有没有办法让按钮只出现，并且当您点击数字输入框时数字框可以设置样式，然后按钮消失并且数字框恢复到默认的未点击样式在预定义的不点击秒数后？

Going from this: 0 To this: [-][ 0 ][+] And back again after you stop tapping: 5

【问题讨论】：

AFAIK，PhoneGap 确实支持<input type="number">，但它可能没有您想要的外观，并且您说您已经找到了解决方案，但希望代码更短。如果您想要自己的自定义编码解决方案，您可能应该首先展示自己尝试编写自定义编码解决方案的努力。
我不是要求有人为我编写代码。我只是问是否有更简单的方法，以便我自己尝试解决。我正在学习 JavaScript，想知道尝试更简单地编写这段代码是否有任何意义，或者我是否应该只使用我找到的代码。如果你不想回答我的问题，可以试着不回答我的问题。

标签： javascript css cordova phonegap numberpicker

【解决方案1】：

好的，回答您的问题（正如您所说，您只想知道尝试自己编写代码是否有任何意义）：

有没有什么更简单的（如代码行数少得多）可以像 DP 号码选择器那样做？这个数字选择器是漂亮的代码，但它是在 2014 年问世的。我希望有一种更简洁、更短的方法来实现这一点。

除非您可以使用<input type="number">，否则您可以自己编写自定义解决方案。自定义编码的解决方案几乎总是比其他人制作的通用解决方案更短，因为您只对您特别需要的功能进行编码。您所问的代码不应该太难编码，并且在学习 JavaScript 时可能是一个很好的练习。

如果有答案，有没有办法让按钮只出现，并且当您点击数字输入框时数字框可以设置样式，然后按钮消失并且数字框恢复到默认的未点击样式在预定义的不点击秒数后？

是的，您可以通过在输入框和按钮上使用事件侦听器来更改外观和样式作为用户交互的结果。您还可以在debouncing 设定的不活动时间后将外观更改回默认值。

【讨论】：

漂亮的回应！我很感激。我会深入挖掘，看看我能弄清楚什么。谢谢！

【解决方案2】：

嘿，我现在正在拼凑一个，随意使用我的笨拙尝试，让它成为你的。

<!DOCTYPE html>
<html>
<head>
<title>Making a number picker. Hatchnet 2019</title>
<style>

.numberpkr {
    position:relative;
    width:100px;
}

.numbertext {
    position: absolute;
    padding:0px;
    line-height:18px;
    height:18px;
    width:100px;
    border:1px solid lightgrey;
    text-align:right;
    left:22px;
    top:0;
}

.plusminus{
    position: absolute;
    padding:2px;
    line-height:14px;
    height:14px;
    border:1px solid lightgrey;
    text-align: center;
    width:16px;
}
.plusname:hover{
    background:green;
    color:white;
}
.plusname {
    color:green;
    right:-44px;
    top:0;
}
.minusname:hover{
    background:red;
    color:white;
}
.minusname {
    color:red;
    left:0px;
    top:0;
}

</style>
</head>
<body>

Some text
<div id="picker"></div>

<script type="text/javascript">

// call on your div
numberPicker("picker");

function numberPicker($id)
{
    // the parent div
    var numberpkr = document.createElement('div'); 
    // the child divs
    var plusDiv = document.createElement('div');
    var minusDiv = document.createElement('div');
    var numberText = document.createElement('div');

    w = document.getElementById($id); // where the picker will go

    numberpkr.className="numberpkr";

    // the plus
    plusDiv.className="plusname plusminus";
    plusDiv.innerHTML = "+";
    plusDiv.onclick = function(){pkrclicked($id, "+");};

    // the minus
    minusDiv.className="minusname plusminus";
    minusDiv.innerHTML = "-";
    minusDiv.onclick = function(){pkrclicked($id, "-");};

    // the acutal number
    numberText.className="numbertext";
    numberText.innerHTML = "0";
    numberText.id = $id + "_1";

    numberpkr.appendChild(minusDiv);
    numberpkr.appendChild(plusDiv);
    numberpkr.appendChild(numberText);
    w.appendChild(numberpkr);
}
function pkrclicked($id, $d)
{
    if($d == "+")
    {
        $n = document.getElementById($id + "_1").innerHTML;
        document.getElementById($id + "_1").innerHTML = parseInt($n) + 1;
    }
    if($d == "-")
    {
        $n = document.getElementById($id + "_1").innerHTML;
        if(parseInt($n) > 0)
        {
            document.getElementById($id + "_1").innerHTML = parseInt($n) - 1;
        }
    }
}
</script>
</body>
</html>

【讨论】：