Teclado virtual y de colores

index.html

<div class="row">
<div class="col s12 l4">
  <div class="card-panel">
    <h5 class="center">Seleccionar Lote</h5>
    <div class="row">
      <section class="input-filts col s12">
         <input type="Number" name="NumberLote" value="" placeholder="Numero del Lote" class="center" style="font-size: 2.9rem;">
         <label for="NumberLote"></label>
      </section>
      <section class="row ">
   
        <div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(1)"><p>1</p></div>
        <div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(2)"><p>2</p></div>
        <div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(3)"><p>3</p></div>
        <div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(4)"><p>4</p></div>
        <div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(5)"><p>5</p></div>
        <div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(6)"><p>6</p></div>
        <div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(7)"><p>7</p></div>
        <div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(8)"><p>8</p></div>
        <div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(9)"><p>9</p></div>
        <div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard('none')"><p></p></div>
        <div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard(0)"><p>0</p></div>
        <div class="col s4 light-blue numbersDashboard center " onclick="setNumbersSelectDashboard('Clear')"><p>Clear</p></div>
      </section>
    </div>
  </div>
</div>
  
  
 

  </div>
</div>
</div>

script.js

function setNumbersSelectDashboard(data){
  console.log('Se ha seleccionado el Numero '+ data);
  var inp = $('input[name=NumberLote]');
  if(data === "Clear") {
    console.log('Limpiar')
    inp.val('');
  } 
  if(data !== 'none') {
    var ant = inp.val();
    var newN = data;
    inp.val(`${ant}${newN}`);
   
  }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.stylus

.numbersDashboard
  background-color: #FFF
  height 115px
  border 2px solid #DDD
  border-radius 8px
  font-size 2em
  cursor pointer

teclado-virtual-y-de-colores.markdown

Teclado virtual y de colores

Este teclado sera usado en un projecto propio

A Pen by joel rosa brito on CodePen.

License.