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

Question

Is it possible to change the arrows in my number input field and use +- signs or images instead?

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

Answer 1

No you cant. For the same reason as you cant control the UI on a mobile phone for inputs like a select. The x to remove the text in the focussed element isn't editable either.

Simple make your own (text) input and add two buttons nexto it. The pro side to that is that not all browsers support the type=number that well, so it would make for a fine crossbrowser solution

---

Small example using native JS (made it real quick, so might not fit perfectly):

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

And this would be the javascript. If you include this in an external file (which you should) don't forget to place it in some document=ready code, or include it at the bottom of the page

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
}

And here is a jsFiddle.net Demo

Answer 2

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/

Answer 3

I am pretty sure this is browser specific, since each one renders this input differently. If you really need that type of control, I would suggest a JavaScript form field wrapper, that can allow you to style each UI in a cross-browser way.

Answer 4

I ended up using the comment from @Joe. "Here's a quick version I just made: jsfiddle.net/mLyX2/1 - it's not the best but it should at least give you an idea of how to do it."