jquery - 我可以在 HTML 数字输入字段中使用 +- 代替箭头吗？

Question

是否可以更改数字输入字段中的箭头并使用 +- 符号或图像代替？

<label>Quantity</label>
<input id="quantity" type="number" name="quantity" value="1"  min="1" class="tc item-quantity" />

Answer 1

不，你不能。出于同样的原因，您无法控制手机上的 UI 以进行选择等输入。用于删除焦点元素中文本的 x 也不可编辑。

简单地创建您自己的(文本)输入并在其旁边添加两个按钮。有利的一面是，并非所有浏览器都很好地支持 type=number，因此它将成为一个很好的跨浏览器解决方案

<小时/>

使用原生 JS 的小示例(使其变得非常快，因此可能不太适合):

<input id="example" type="text" value="1337" />
<div id="add">Add 1</div>
<div id="subtract">subract 1</div>

这就是 javascript。如果您将其包含在外部文件中(您应该这样做)，请不要忘记将其放入某些 document=ready 代码中，或将其包含在页面底部

var input = document.getElementById('example');

document.getElementById('add').onclick = function(){
    input.value = parseInt(input.value, 10) +1
}

document.getElementById('subtract').onclick = function(){
    input.value = parseInt(input.value, 10) -1
}

这是a jsFiddle.net Demo