一个加减号控制input框里数字的js,左边是一个减号,右边一个加号,中间是input框,当数字为1时,左边减号置灰不可点击,数字为99时,加号置灰不可点击,点击加减号,input数字改变.
效果图如下:
addInputWithAdjustBtn()和addEvent()是封装后的函数(我是封装在tvbz_ui.js里面),页面需要的时候,直接引用即可
/*
*根据input输入框调整button按钮
*@param inputId input输入框Id
*@param changeCount input输入框事件
*/
function addInputWithAdjustBtn(inputId,changeCount) {
var inputObj = document.getElementById(inputId);
var height = inputObj.offsetHeight + "px";
var width = (inputObj.offsetWidth / 2) + "px";
var button_reduce = document.createElement("input");
button_reduce.type='button';
button_reduce.value='-';
button_reduce.id='reduce_btn';
button_reduce.style.width= width;
button_reduce.style.height = height;
var button_add = document.createElement("input");
button_add.type='button';
button_add.value='+';
button_add.id='add_btn';
button_add.style.width= width;
button_add.style.height = height;
inputObj.parentNode.insertBefore(button_reduce,inputObj);
inputObj.parentNode.insertBefore(button_add,inputObj.nextSibling);
addEvent(button_reduce,'click',function(){
var num_reduce = parseInt($("#"+inputId).val()) - 1;
$('#'+inputId).next().attr("disabled",false);
if (num_reduce <= 1) {
button_reduce.disabled = true;
$('#'+inputId).val(num_reduce);
} else {
button_reduce.disabled = false;
$('#'+inputId).val(num_reduce);
}
changeCount();
});
addEvent(button_add,'click',function(){
var num_add = parseInt($("#"+inputId).val()) + 1;
$('#'+inputId).prev().attr("disabled",false);
if (num_add >= 99) {
button_add.disabled = true;
$('#'+inputId).val(num_add);
} else {
button_add.disabled = false;
$('#'+inputId).val(num_add);
}
changeCount();
});
};
function addEvent(el, type, myFunction) {
if(el.addEventListener){ //所有主流浏览器,除了 IE 8 及更早 IE版本
el.addEventListener(type,myFunction);
}else if(el.attachEvent()){ // IE 8 及更早 IE 版本
el.attachEvent('on' + type,myFunction);
}else{
return false;
}
};
<input size=2 maxlength=2 value=1 id="payCnt" οnkeyup=Num(this) style="text-align: center;" >
input输入框手动输入数值后响应onkeyup事件js:
function Num(obj){
var count = $("#payCnt").val();
obj.value = obj.value.replace(/[A-Za-z0-9]/g, toHalf); //A-Za-z0-9全角转半角数字
obj.value = obj.value.replace(/[^\d]/g,""); //清除"数字"以外的字符
if (typeof(obj.value) =='undefined' || obj.value == "" || obj.value == null) {
$("#payCnt").prev().attr("disabled",true);
$("#payCnt").next().attr("disabled",true);
} else {
if (count <= 1) {
$("#payCnt").prev().attr("disabled",true);
$("#payCnt").next().attr("disabled",false);
}
if (count >= 99) {
$("#payCnt").prev().attr("disabled",false);
$("#payCnt").next().attr("disabled",true);
}
if (count > 1 && count < 99) {
$("#payCnt").prev().attr("disabled",false);
$("#payCnt").next().attr("disabled",false);
}
}
};