发一个js库，控制输入文本框为可使用滚轮控制

Question

简介实现类似于Photoshop控制面板输入文本数字的效果，所以名称叫做PsWheel。用于控制输入数字类型文本框实现鼠标滚轮上下滑动改变值，支持正整数、小数类型输入文本。
兼容IE/Firefox/Opera/Safari/Chrom
可定义滚动变化间隔值，支持整数、浮点数
双击恢复初始值
仅3.92K，压缩后2.67K代码
还有不少地方可以优化，请高手指点。
/*
 * cutePsWheel JS
 * Description:A js liabary which control the text type of input box can plus or minus value like Photoshop
 * Author:walkingp
 * Site:http://www.51obj.cn/
 * E-mail:[email protected]
 * Last Modified:2010-2-5
 */
 
//Initial the wheel scroll event
var _orientValue=[];//orient value
var _interval=[];
var _length=[];
function InitScrollFunc(){
    var eles=GetObj();
    for(var i=0;i<eles.length;i++){
        if(document.addEventListener){
            (function(i){eles[i].addEventListener('DOMMouseScroll',function(e){e.preventDefault();e.stopPropagation();var direct=e.detail<0?1:-1;ScrollText(eles[i],direct);},false);})(i);
            eles[i].addEventListener('dblclick',RestoreOrientValue,false);
            eles[i].addEventListener('blur',RemoveScrollFunc,false);
            //eles[i].addEventListener('mouseover',SetFocus,false);
        }//W3C/Mozila
        (function(i){eles[i].onmousewheel=function(){ScrollFunc(event,eles[i]);}})(i);//IE/Opera/Chrome/Safari
        (function(i){eles[i].ondblclick=function(){RestoreOrientValue(eles[i]);;}})(i);
        (function(i){eles[i].onblur=function(){RemoveScrollFunc(eles[i]);;}})(i);//Remove the wheel scroll event
        (function(i){eles[i].onmouseover=function(){SetFocus(eles[i]);}})(i);
        
        /*Initial the value array*/
        if(eles[i].value!=""){
            _orientValue.push(eles[i].value);
        }else{
            _orientValue.push(0);
        }
        if(eles[i].getAttribute("interval")){
            _interval.push(parseFloat(eles[i].getAttribute("interval")));
            if(eles[i].getAttribute("interval").toString().indexOf(".")>0){
                var __length=parseInt(eles[i].getAttribute("interval").toString().length) - parseInt(eles[i].getAttribute("interval").toString().indexOf("."))-1;
                _length.push(__length);//get the length follow the decimal point 
            }else{
                _length.push(0);
            }
        }else{
            _interval.push(1);
            _length.push(0);
        }
    }
}/*set object focus*/
function SetFocus(obj){
    obj.focus();
    obj.select();
}
/*remove the wheel scroll event*/
function RemoveScrollFunc(obj){
    if(document.removeEventListener){
        obj.removeEventListener('DOMMouseScroll',ScrollFunc,false);
        obj.removeEventListener('dblclick',RestoreOrientValue,false);
    }else if(document.detachEvent){
        obj.detachEvent('onmousewheel',ScrollFunc);
        obj.detachEvent('ondblclick',RestoreOrientValue);
    }
}
/*Restore the text box's orient value when double click event trigger*/
function RestoreOrientValue(obj){
    var eles=GetObj();
    for(var i=0;i<eles.length;i++){
        if(obj==eles[i]){
            obj.value=_orientValue[i];
            obj.select();
        }
    }
}//core function
function ScrollFunc(){//for HTML DOM
    var direct=0;
    var e=arguments[0]||window.event;
    if(window.event){
        window.event.returnValue=false;
        window.event.cancelBubble=true;//Stop event bubble
    }
    if(e.wheelDelta){
        direct=e.wheelDelta>0?1:-1;
    }
    ScrollText(arguments[1],direct);
}
//reference by ScrollFunc
function ScrollText(obj,direct){
    obj.focus();
    var _value=0;
    if(obj.value!=""){
        _value=parseFloat(obj.value);
    }
    var eles=GetObj();
    for(var i=0;i<eles.length;i++){
        if(obj==eles[i]){
            if(direct>0){
                _value+=_interval[i];    
            }else{
                _value-=_interval[i];
            }
            obj.value=_value.toFixed(_length[i]);//calulcate the rounding result
            obj.select();//set select status
        }
    }
}
//referenced function,only get the object which has the 'rel' attribute
function GetObj(){
    var objs=document.getElementsByTagName('input');
    var elements=[];
    for(var i=0;i<objs.length;i++){
        if(objs[i].type=='text' &&     objs[i].getAttribute('rel') == 'wheel'){
            elements.push(objs[i]);
        }
    }
    return elements;
}
 //Add the WheelScroll function
(function AddLoadEvent(func){
    var _oldonload=window.onload;
    if(typeof window.onload!='function'){
        window.onload=func;
    }else{
        window.onload=function(){
            _oldonload();
            func();
        }
    }
 })(InitScrollFunc);预览效果
预览
预览效果下载

Answer 1

1.太多全局变量污染
2.(function(i){})(i)这种应该怎么用？你写了那么多
3.if(typeof window.onload!='function'){//如果我没记错，这种方法不能检测使用attachEvent等添加上的load事件

Answer 2

针对sohighthesky的意见进行了稍微的一些优化，其中就是全局变量的问题我开始就注意到了，这个如何改进？谢谢。/*
 * cutePsWheel JS
 * Description:A js liabary which control the text type of input box can plus or minus value like Photoshop
 * Author:walkingp
 * Site:http://www.51obj.cn/
 * E-mail:[email protected]
 * Last Modified:2010-2-6
 */
 
//Initial the wheel scroll event
var _orientValue=[];//orient value
var _interval=[];//the interval value
var _length=[];//the decimal point position of orient value
function InitScrollFunc(){
var eles=GetObj();
for(var i=0,j=eles.length;i<j;i++){
if(document.addEventListener){
(function(i){eles[i].addEventListener('DOMMouseScroll',function(e){e.preventDefault();e.stopPropagation();var direct=e.detail<0?1:-1;ScrollText(eles[i],direct);},false);})(i);
eles[i].addEventListener('dblclick',RestoreOrientValue,false);
eles[i].addEventListener('blur',RemoveScrollFunc,false);
//eles[i].addEventListener('mouseover',SetFocus,false);
}//W3C/Mozila
(function(i){
  eles[i].onmousewheel=function(){ScrollFunc(event,eles[i]);}//the wheel scroll function
  eles[i].ondblclick=function(){RestoreOrientValue(eles[i]);}//Restore the orient value
  eles[i].onblur=function(){RemoveScrollFunc(eles[i]);}//Remove the wheel scroll event
  eles[i].onmouseover=function(){SetFocus(eles[i]);}//the mouseover function
  })(i);//IE/Opera/Chrome/Safari

/*Initial the value array*/
if(eles[i].value!=""){
_orientValue.push(eles[i].value);
}else{
_orientValue.push(0);
}
if(eles[i].getAttribute("interval")){
_interval.push(parseFloat(eles[i].getAttribute("interval")));
if(eles[i].getAttribute("interval").toString().indexOf(".")>0){
var __length=parseInt(eles[i].getAttribute("interval").toString().length) - parseInt(eles[i].getAttribute("interval").toString().indexOf("."))-1;
_length.push(__length);//get the length follow the decimal point 
}else{
_length.push(0);
}
}else{
_interval.push(1);
_length.push(0);
}
}
}/*set object focus*/
function SetFocus(obj){
obj.focus();
obj.select();
}
/*remove the wheel scroll event*/
function RemoveScrollFunc(obj){
if(document.removeEventListener){
obj.removeEventListener('DOMMouseScroll',ScrollFunc,false);
obj.removeEventListener('dblclick',RestoreOrientValue,false);
}else if(document.detachEvent){
obj.detachEvent('onmousewheel',ScrollFunc);
obj.detachEvent('ondblclick',RestoreOrientValue);
}
}
/*Restore the text box's orient value when double click event trigger*/
function RestoreOrientValue(obj){
var eles=GetObj();
for(var i=0,j=eles.length;i<j;i++){
if(obj==eles[i]){
obj.value=_orientValue[i];
obj.select();
}
}
}//core function
function ScrollFunc(){//for HTML DOM
var direct=0;
var e=arguments[0]||window.event;
if(window.event){
window.event.returnValue=false;
window.event.cancelBubble=true;//Stop event bubble
}
if(e.wheelDelta){
direct=e.wheelDelta>0?1:-1;
}
ScrollText(arguments[1],direct);
}
//reference by ScrollFunc
function ScrollText(obj,direct){
obj.focus();
var _value=0;
if(obj.value!=""){
_value=parseFloat(obj.value);
}
var eles=GetObj();
for(var i=0;i<eles.length;i++){
if(obj==eles[i]){
if(direct>0){
_value+=_interval[i];
}else{
_value-=_interval[i];
}
obj.value=_value.toFixed(_length[i]);//calulcate the rounding result
obj.select();//set select status
}
}
}
//referenced function,only get the object which has the 'rel' attribute
function GetObj(){
var objs=document.getElementsByTagName('input');
var elements=[];
for(var i=0;i<objs.length;i++){
if(objs[i].type=='text' &&  objs[i].getAttribute('rel') == 'wheel'){
elements.push(objs[i]);
}
}
return elements;
}
 //Add the WheelScroll function
(function AddLoadEvent(func){
if(window.attachEvent){
window.attachEvent("onload" ,func);
}else if(window.addEventListener){
window.addEventListener("load",func,false);
}else{
window.onload=func;
}
 })(InitScrollFunc);

Answer 3

看下这个demo
http://www.51obj.cn/demo/js/CutePsWheel/demo.html

Answer 4

修正全局变量的问题。
/*
 * cutePsWheel JS
 * Description:A js liabary which control the text type of input box can plus or minus value like Photoshop
 * Author:walkingp
 * Site:http://www.51obj.cn/
 * E-mail:[email protected]
 * Last Modified:2010-2-6
 */ 
var CutePsWheel=function(){
//Initial the wheel scroll event
var _orientValue=[];//orient value
var _interval=[];//the interval value
var _length=[];//the decimal point position of orient value
function InitScrollFunc(){
var eles=GetObj();
for(var i=0,j=eles.length;i<j;i++){
if(document.addEventListener){
(function(i){eles[i].addEventListener('DOMMouseScroll',function(e){e.preventDefault();e.stopPropagation();var direct=e.detail<0?1:-1;ScrollText(eles[i],direct);},false);})(i);
eles[i].addEventListener('dblclick',RestoreOrientValue,false);
eles[i].addEventListener('blur',RemoveScrollFunc,false);
//eles[i].addEventListener('mouseover',SetFocus,false);
}//W3C/Mozila
(function(i){
  eles[i].onmousewheel=function(){ScrollFunc(event,eles[i]);}//the wheel scroll function
  eles[i].ondblclick=function(){RestoreOrientValue(eles[i]);}//Restore the orient value
  eles[i].onblur=function(){RemoveScrollFunc(eles[i]);}//Remove the wheel scroll event
  eles[i].onmouseover=function(){SetFocus(eles[i]);}//the mouseover function
  })(i);//IE/Opera/Chrome/Safari

/*Initial the value array*/
if(eles[i].value!=""){
_orientValue.push(eles[i].value);
}else{
_orientValue.push(0);
}
if(eles[i].getAttribute("interval")){
_interval.push(parseFloat(eles[i].getAttribute("interval")));
if(eles[i].getAttribute("interval").toString().indexOf(".")>0){
var __length=parseInt(eles[i].getAttribute("interval").toString().length) - parseInt(eles[i].getAttribute("interval").toString().indexOf("."))-1;
_length.push(__length);//get the length follow the decimal point 
}else{
_length.push(0);
}
}else{
_interval.push(1);
_length.push(0);
}
}
}

/*set object focus*/
function SetFocus(obj){
obj.focus();
obj.select();
}
/*remove the wheel scroll event*/
function RemoveScrollFunc(obj){
if(document.removeEventListener){
obj.removeEventListener('DOMMouseScroll',ScrollFunc,false);
obj.removeEventListener('dblclick',RestoreOrientValue,false);
}else if(document.detachEvent){
obj.detachEvent('onmousewheel',ScrollFunc);
obj.detachEvent('ondblclick',RestoreOrientValue);
}
}
/*Restore the text box's orient value when double click event trigger*/
function RestoreOrientValue(obj){
var eles=GetObj();
for(var i=0,j=eles.length;i<j;i++){
if(obj==eles[i]){
obj.value=_orientValue[i];
obj.select();
}
}
}

//core function
function ScrollFunc(){//for HTML DOM
var direct=0;
var e=arguments[0]||window.event;
if(window.event){
window.event.returnValue=false;
window.event.cancelBubble=true;//Stop event bubble
}
if(e.wheelDelta){
direct=e.wheelDelta>0?1:-1;
}
ScrollText(arguments[1],direct);
}
//reference by ScrollFunc
function ScrollText(obj,direct){
obj.focus();
var _value=0;
if(obj.value!=""){
_value=parseFloat(obj.value);
}
var eles=GetObj();
for(var i=0;i<eles.length;i++){
if(obj==eles[i]){
if(direct>0){
_value+=_interval[i];
}else{
_value-=_interval[i];
}
obj.value=_value.toFixed(_length[i]);//calulcate the rounding result
obj.select();//set select status
}
}
}
//referenced function,only get the object which has the 'rel' attribute
function GetObj(){
var objs=document.getElementsByTagName('input');
var elements=[];
for(var i=0;i<objs.length;i++){
if(objs[i].type=='text' &&  objs[i].getAttribute('rel') == 'wheel'){
elements.push(objs[i]);
}
}
return elements;
}
 //Add the WheelScroll function
(function AddLoadEvent(func){
if(window.attachEvent){
window.attachEvent("onload" ,func);
}else if(window.addEventListener){
window.addEventListener("load",func,false);
}else{
window.onload=func;
}
 })(InitScrollFunc);
}();