Implementation is similar to the effect of entering text numbers on the Photoshop control panel, so the name is PsWheel. It is used to control the input numeric text box to realize the sliding up and down of the scroll wheel to change the value. It supports positive integers and decimals. Introduction
Implementation is similar to the effect of entering text numbers on the Photoshop control panel, so the name is PsWheel. It is used to control the input numeric text box to realize the sliding up and down of the scroll wheel to change the value. It supports positive integers and decimals.
Compatible with IE/Firefox/Opera/Safari/Chrom
You can define the interval between scrolling changes. integers and floating-point numbers are supported.
Double-click Restore Initial Value
Only 3.92 K, 2.67 K after compression
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; I If (document. addEventListener ){
(Function (I) {eles [I]. addEventListener ('domainscroll', 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/ila ILA
(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 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 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 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 );
Resources
Click Preview http://demo.jb51.net/js/cutePSWheel/demo.html
Download Code