自定义微调器输入的类型编号没有js

Question

我需要使用自定义微调器创建输入类型=“数字”。它必须像那样

没有js我怎么能这样做？或js需要吗？

Answer 1

您需要使用javascript / jQuery。您可以使用jQuery用户界面插件进行微调器。的 Demo

如果是插件，您需要根据需要对其进行自定义，可以通过CSS样式替换和重新定位箭头。

或者你可以试试这个：

<强> HTML

<a id="down" href="#" onclick="updateSpinner(this);">-</a><input id="content" value="0" type="text" style="width:30px" /><a id="up" href="#"  onclick="updateSpinner(this);">+</a>

<强> CSS：

a
{
    text-decoration: none;
}

<强> JavaScript的：

function updateSpinner(obj)
{
    var contentObj = document.getElementById("content");
    var value = parseInt(contentObj.value);
    if(obj.id == "down") {
        value--;
    } else {
        value++;
    }
    contentObj.value = value;
}

我可以在fiddle上看到我的工作示例。

Answer 2

您可以使用以下命令定位css中的按钮：

input[type="number"]::-webkit-outer-spin-button{}
input[type="number"]::-webkit-inner-spin-button{}

但是，尝试实现您希望实现的设计可能很难，而js可能是您的最佳选择。上面的css也适用于webkit浏览器（chrome，safari）。

JS将是您最安全，最友好的跨浏览器。

Answer 3

如果您不想要负数且数字不超过100，我认为这是@AmanVirdi代码的更好版本。

如果超过100，只需根据需要调整条件if（value＆gt; 99）。

for (var key in y) {
  ...
  self.push('values', [key, i]);
}