Botón más/menos

Añadir un botón con el que controlar el contenido de un campo de formulario, en este caso se usa para incrementar disminuir un valor numérico de ese campo..

Solución

<script>

function oBotonCtrl( idcampo, min, max){
this.control = document.getElementById(idcampo);
this.min = min; this.max = max;
this.seguir = 0;
this.mas = function(){this.seguir = 1; this.cambiar()};
this.menos = function(){this.seguir = -1; this.cambiar()};

this.parar = function(){this.seguir=0};
this.cambiar = function()
{
var lim = this.seguir>0?this.max:this.min;
if ( this.control.value == '')
this.control.value = 0;
if ( this.control.value != lim)
{
this.control.value = parseInt( this.control.value)+this.seguir;
if(this.seguir!=0)
setTimeout(this.cambiar.bind(this), 200);
}
}
}

//Fin del objeto botón

</script>

 <body>

<form name="form2" method="post" action="">

<input type="text" name="control" id="control">

<map name="m_ctrl2">

<area shape="rect" coords="0,0,13,10" href="javascript:void(0)"

onmousedown="boton2.mas()" onmouseup="boton2.parar()">

<area shape="rect" coords="0,11,13,20" href="javascript:void(0)"

onmousedown="boton2.menos()" onmouseup="boton2.parar()">

</map>

<img name="ctrl2" src="ctrl.gif" width="13" height="20" usemap="#m_ctrl2" align="absmiddle"

onLoad="window.boton2 = new oBotonCtrl('control', -50, 50)">

</form>

</body>

Explicación

El script crea un objeto para incrementar o decrementar el contenido del campo con id="control".

Este objeto se denomina oBotonCtrl, sus propiedades y métodos son

Propiedades  
control El objeto campo del formulario sobre el que actúa
max número, Valor máximo del contenido del campo
min número, Valor mínimo del contenido del campo
seguir -1, 0, 1. Es el valor en que se incrementa el valor del campo asociado
Métodos  
mas Para subir el valor del campo (seguir = 1)
menos Para disminuir el valor del campo (seguir = -1)
parar Parar el cambio del campo (seguir = 0)
cambiar Modifica el valor del campo.
   

El objeto se crea como es habitual con el operador new:

         boton1 = new oBotonCtrl(control, -50, 50)

Donde control es el id del control sobre el que actuará el botón.

El formulario debe existir cuando se cree el objeto botón.

El botón se materializa en una imagen que se usa como mapa de enlaces: en enlace incremetna el valor y otro lo decrementa.

Como lo uso

 En el código HTML como puedes observar se utiliza un image map, o sea, una imagen con areas activas que hacen de enlaces.

Cuando la imagen se ha cargado se dispara el evento onload, que se encarga de crear el objeto boton2 del tipo oBotonCtrl,

Este objeto que está asociado al campo control del formulario form2, siendo -50 y 50 los valores límites para el contenido del campo. El objeto también puede crearse mediante un evento onload del body.

En el image map existen dos areas, una para cada mitad del botón. Al pulsar el área superior se llama al método mas() del boton2 usando un evento mousedown, cuando soltamos el botón se genera un evento mouseup que llama al método parar() del boton2.

Como reto queda adaptar este script para que ademas de números pueda manejar listas de valores. ¿Alguien se atreve? Quien lo logre que comparta su trabajo.