Question

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

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

Answer 1

不，你不能。出于同样的原因，你无法控制手机上的用户界面输入，如选择。删除焦点元素中的文本的x也不可编辑。

简单地制作您自己的（文本）输入并添加两个按钮。专业方面的是，并非所有浏览器都支持类型=数字，因此它将成为一个优秀的crossbrowser解决方案

使用原生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

Answer 2

看到这个小提琴，看看它是否需要：

$(window).on('keypress', function(event ){
    if(event.which == 43){
       var value =  $('#quantity').val();
       $('#quantity').val(parseInt(value)+1);
        return false;
    }else if(event.which == 45){
         var value =  $('#quantity').val();
       $('#quantity').val(parseInt(value)-1);
        return false;
    }
});

http://jsfiddle.net/abhiklpm/7TUe2/

编辑：使用图片更新小提琴

$('.plus').click(function(){
        var value =  $('#quantity').val();
       $('#quantity').val(parseInt(value)+1);
});
$('.minus').click(function(){
        var value =  $('#quantity').val();
       $('#quantity').val(parseInt(value)-1);
});

http://jsfiddle.net/abhiklpm/7TUe2/1/

Answer 3

我很确定这是特定于浏览器的，因为每个都以不同的方式呈现此输入。如果您确实需要这种类型的控件，我建议使用JavaScript表单字段包装器，它允许您以跨浏览器的方式设置每个UI的样式。

Answer 4

我最终使用了@Joe的评论。 “这是我刚刚制作的快速版本：jsfiddle.net/mLyX2/1 - 它不是最好的，但它至少应该让你知道如何做到这一点。”

我可以在HTML编号输入字段中使用+ - 而不是箭头吗？

4 个答案: