Javascript 自定义微调器不带js的输入类型编号

我需要使用自定义微调器创建输入type=“number”。应该是这样的

---

没有js我怎么能做到？或者这里需要js？

您需要使用javascript/jQuery。您可以将jQuery用户界面插件用于微调器

在插件的情况下，您需要根据需要对其进行自定义，可以用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>

a
{
    text-decoration: none;
}

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

JavaScript:

<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>

a
{
    text-decoration: none;
}

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

---

我可以在上面看到一个工作示例。

您可以使用以下命令将css中的按钮作为目标：

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

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

---

JS将是您最安全、最适合跨浏览器的赌注。

如果您不希望出现负数且数字不大于100，我认为这是@AmanVirdi编写的代码的更好版本

对于超过100个，只要调整条件（值>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;
}

---

你可以在某种程度上设计原生按钮的样式，但我不认为它们可以这样设计。但是，您可以删除它们并创建新按钮，但这需要javascript的功能和一些新元素？有了js，我已经做到了，只是想知道没有js是否可能。我真的想知道为什么当OP问到“没有js”时，这些人会回答js的答案。这意味着没有JS的家伙，请不要回答JS解决方案，如果你可以用CSS。