1

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

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

4 回答 4

2

不，你不能。出于同样的原因，您无法控制手机上的 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
}

这是一个 jsFiddle.net 演示

于 2013-11-13T12:45:48.627 回答
1

see this fiddle and see whether its what u need: 

$(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/

Edit: Updated the fiddle using images

$('.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/

于 2013-11-13T12:52:02.947 回答
0

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

于 2013-11-19T20:00:45.900 回答
0

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

于 2013-11-13T12:42:18.300 回答