不使用JavaScript自定义微调器的输入类型为数字。

Question

我需要创建带有自定义微调器的。它需要像这样：

我如何在不使用JavaScript的情况下实现它？还是说需要使用JavaScript？

- CroaToa

---

你可以在一定程度上为原生按钮添加样式，但我认为它们无法像那样进行样式设计。不过，你可以移除它们并创建新的按钮，但这需要使用JavaScript实现功能和添加一些新元素。 - adeneo

我已经开始了，但是需要太长时间，你可以自己完成样式 -> http://jsfiddle.net/eE7cs/ - adeneo

没有js不能做吗？用js我已经做过了，只是想知道是否可以不用js来实现。 - CroaToa

我真的很想明白为什么这些人在提问者要求“不用 JS”的情况下回答 JS 的答案。这意味着“不用 JS”，请不要用 JS 提供解决方案，如果可以用 CSS 解决的话。 - Machado

Answer 1

您需要使用JavaScript/jQuery。您可以使用jQuery用户界面插件来实现Spinner。演示。

如果使用插件，您需要根据需要进行自定义，箭头可以通过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上提供了一个工作示例。

- AmanVirdi

Answer 2

您可以使用以下方法在CSS中针对按钮进行定位：

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

然而，尝试实现您希望实现的设计可能很困难，js可能是您最好的选择。上述css仅在webkit浏览器（如chrome，safari）中有效。

JS将是您最安全和最跨浏览器友好的选择。

- abrosis

Answer 3

我认为这是@AmanVirdi的代码的更好版本，如果你不想要负数和数字不大于100。

如果要超过100，只需调整条件if(value > 99)即可。

function updateSpinner(obj)
{
    var contentObj = document.getElementById("content");
    var value = parseInt(contentObj.value);

    if(isNaN(value)){
            contentObj.value=0;
            return;
        }
    else{
    if(obj.id == "down" && value >= 1) {
        value--;
    } else if(obj.id == "up"){
        if(value > 99){alert("Max Value Reached"); contentObj.value=100; return;}
        value++;
    }
   }
    contentObj.value = value;
}

- Hitesh Ramola