我有jQuery spinner上下编号的代码:
HTML:
<div class="container">
<div class="input-group spinner">
<input type="text" class="form-control" value="42">
<div class="input-group-btn-vertical">
<div class="btn btn-default"><i class="fa fa-caret-up"></i></div>
<div class="btn btn-default"><i class="fa fa-caret-down"></i></div>
</div>
</div>
</div>
JS:
(function ($) {
$('.spinner .btn:first-of-type').on('click', function() {
$('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
});
$('.spinner .btn:last-of-type').on('click', function() {
$('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
});
})(jQuery);
这项工作但我需要添加两个选项:
如何添加此选项?!
DEMO FIDDLE
答案 0 :(得分:3)
变化:
<input type="text" class="form-control" value="42">
要:
<input type="number" min="0" max="10" steps="1" class="form-control" value="5">
如果您希望用户能够更改价值,我对您的问题并不十分了解,如果您不希望他们更改价值,只需添加只读属性为输入字段,如下所示
<input type="number" min="0" max="10" steps="1" class="form-control" value="5" readonly>
答案 1 :(得分:3)
使用我认为你想要的jQuery来完成所有这些:
$(document).ready(function(){
//Stop people from typing
$('.spinner input').keydown(function(e){
e.preventDefault();
return false;
});
var minNumber = 1;
var maxNumber = 10;
$('.spinner .btn:first-of-type').on('click', function() {
if($('.spinner input').val() == maxNumber){
return false;
}else{
$('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
}
});
$('.spinner .btn:last-of-type').on('click', function() {
if($('.spinner input').val() == minNumber){
return false;
}else{
$('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
}
});
});
我还没有检查,但应该非常准确
答案 2 :(得分:1)
假设您必须将该数据发送回服务器,设置输入readonly属性并为输入值添加一些限制相当容易。 这是演示 http://jsbin.com/yebawihune/7/
答案 3 :(得分:1)
通过这种方式,您可以根据需要动态添加任意数量的跨浏览器兼容(甚至是IE)。当然,你必须为jquery包含所需的js和css文件。
首先,您必须创建输入。记下您的ID,稍后您将使用它。我总是在输入中为id和name参数添加相同的值。
<input id="elementName" name="elementName">
然后把它放在你的头部。
function createSpinner(elemName, elemVal, elemMin, elemMax, elemStep){
var mySpinner = $( '#' + elemName ).spinner({
min: elemMin,
max: elemMax,
step: elemStep,
change: function( event, ui ) {
var typedVal = $( '#' + elemName ).spinner( 'value' );
if (typedVal < elemMin || typedVal > elemMax) {
alert('Value must be between ' + elemMin + ' and ' + elemMax);
$('#' + elemName).spinner('value', elemVal);
}
}
});
$('#' + elemName).spinner('value', elemVal);
};
然后你只需调用函数,传递所需的参数(第一个参数将是输入ID的值)。
createSpinner('elementName','0','0','10000','1');
答案 4 :(得分:0)
更好的方法:
bootstrap snipper非常简单:
HTML
<input type="text" class="aSpinEdit" />
的Javascript
$('.aSpinEdit').spinedit({
minimum: -10,
maximum: 50,
step: 1
});