Botón más/menos

indice de ejemplos
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. En realidad esto ya lo incorpora HTML en los formatos input numéricos, este ejemplo te permite personalizar ese comportamiento.

Solución

<script>

function BotonCtrl( 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()
     {
      let 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 BotonCtrl('control', -50, 50)">

</form>

</body>

Explicación

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

Aunque actualmente este comportamiento está incluído en el type numeric de los input de los formularios, puede venir bien por que este sistema es aplicable a campos no numéricos con mínimas modificaciones.

Este es un script antiguo y usa HTML para asociar el evento a su gestor. También puede hacerse usando javascript (addEventListener)

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 está asociado al campo con el valor que se modifica el 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.