CutePsWheel javascript libary controls the input text box to be a js library that can be controlled using the scroll wheel_javascript skills

Introduction

Achieves an effect similar to the input of text numbers in the Photoshop control panel, so the name is PsWheel. It is used to control the input of numeric type text box to realize the up and down sliding of the mouse wheel to change the value. It supports positive integer and decimal type text input.
Compatible with IE/Firefox/Opera/Safari/Chrom
Can define the scroll change interval value, supports integers and floating point numbers
Double-click to restore the initial value
Only 3.92K, 2.67K after compression
Code

Copy code The code is as follows:

/*
* 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 :walkingp@126.com
* 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;iif(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;iif(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;iif(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;iif(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);

Rendering

Resources
Click to previewhttp://demo.jb51.net/js/cutePSWheel/demo.html
Download Code