Good morning,
Currently I have developed a web application for Firefox with html5, Javascript and jQuery. The application is used on a tablet device as well as on a computer.
In one of the screens, I have created a numeric keyboard (to avoid having to use the one on the tablet) which introduces numbers and navigates between different measurements.
This is how the keyboard is on the screen:
The problem comes when the user wants to enter the numbers quickly. It does not happen on the computer, but on the tablet when the following numbers are pressed so faster: 1, 2, 3, 4, 5, 6 (for example) only some are detected and others are lost. However, if the user enters a digit every second they are all identified.
I enclose the html and javascript code in case anyone knows why it may be happening:
HTML:
<div id="componenteTeclado" data-role="footer" data-tap-toggle="false">
<center>
<div class="row">
<div class="col-2 botonesTeclado">
<a data-role="button" data-theme="b" class="numero " style="display: block">1</a>
</div>
<div class="col-2 botonesTeclado">
<a data-role="button" data-theme="b" class="numero " style="display: block">2</a>
</div>
<div class="col-2 botonesTeclado">
<a data-role="button" data-theme="b" class="numero" style="display: block">3</a>
</div>
<div class="col-2 botonesTeclado">
<a data-role="button" data-theme="b" class="numero" style="display: block">4</a>
</div>
<div class="col-2 botonesTeclado">
<a data-role="button" data-theme="b" class="numero" style="display: block">5</a>
</div>
<div class="col-2 botonesTeclado">
<a data-role="button" data-theme="b" class="numero" style="display: block">6</a>
</div>
<div class="col-2 botonesTeclado">
<a data-role="button" data-theme="b" class="numero" style="display: block">7</a>
</div>
<div class="col-2 botonesTeclado">
<a data-role="button" data-theme="b" class="numero" style="display: block">8</a>
</div>
<div class="col-2 botonesTeclado">
<a data-role="button" data-theme="b" class="numero" style="display: block">9</a>
</div>
<div class="col-2 botonesTeclado">
<a data-role="button" data-theme="b" class="numero" style="display: block">0</a>
</div>
<div class="col-2 botonesTeclado" id ="dotSmallScreen">
<a data-role="button" data-theme="b" class=" dot" style="display: block">.</a>
</div>
<div class="col-1 botonesTeclado" id ="dotBigScreen">
<a data-role="button" data-theme="b" class=" dot" style="display: block">.</a>
</div>
<div class="col-2 botonesTeclado" id ="guionSmallScreen">
<a data-role="button" data-theme="b" class=" guion" style="display: block">-</a>
</div>
<div class="col-1 botonesTeclado" id ="guionBigScreen" style="margin-left: 0px">
<a data-role="button" data-theme="b" class=" guion" style="display: block">-</a>
</div>
<div class="col-2 botonesTeclado delete" id="deleteBigScreen" style="margin-left: 0px">
<a data-role="button" data-theme="b" class=" del"><img src="icons/delete3.png" /></a> <!-- width="100%" -->
</div>
<div class=" col-v2 col-b1 botonesTeclado sinPadding">
<a href="#" id="firstReadingButton" onclick="lecturaDetail.goToFirstReading()" data-role="button" data-theme="b" style="display: block"><< </a>
</div>
<div class=" col-v3 col-b1 col-b1-3 botonesTeclado sinPadding">
<a href="#" id="previousReadingButton" onclick="lecturaDetail.previousReading()" data-role="button" data-theme="b" style="display: block"><</a>
</div>
<div class=" col-v3 col-b2 col-b1-9 teclaBajo">
<div class="row">
<div class="col-c60 pagina" >
<input type="text" data-theme="c" id="currentReadingIndex" >
</div>
<div class="col-c40 pagina" >
<p id="maxReadings" >/0</p>
</div>
</div>
</div>
<div class="col-v3 col-b1 col-b1-3 botonesTeclado sinPadding">
<a href="#" id="nextReadingButton" onclick="lecturaDetail.nextReading()" data-role="button" data-theme="b" style="display: block">></a>
</div>
<div class="col-v2 col-b1 botonesTeclado sinPadding">
<a href="#" id="lastReadingButton" onclick="lecturaDetail.goToLastReading()" data-role="button" data-theme="b" style="display: block">>></a>
</div>
<div class="col-v4 col-b2 botonesTeclado buscar" id="buscarSmallScreen">
<a href="#" id="goToReadingButton" onclick="lecturaDetail.goToReading()" data-role="button" data-theme="b" data-inline="true" style="margin:10px 0px 0px 0px;"> <img src="icons/search.png" /> </a> <!-- style="padding-left: 0.75rem !important" -->
</div>
<div class="col-v5 col-b2 botonesTeclado buscar" id="buscarBigScreen">
<a href="#" id="goToReadingButton" onclick="lecturaDetail.goToReading()" data-role="button" data-theme="b" data-inline="true" style="display: block"> <img src="icons/search.png" /> </a>
</div>
<div class="col-v5 col-b2 botonesTeclado rojo">
<a id="botonCancelar" href="#" onclick="lecturaDetail.onClickCancel()" data-role="button" data-theme="c" data-inline="true" style="display: block; margin: 0px;"> Limpiar </a>
</div>
<div class="col-v5 col-b2 botonesTeclado azul">
<a id="botonGuardar" href="#" onclick="lecturaDetail.onClickSave()" data-role="button" data-theme="c" data-inline="true" style="display: block; margin: 5px;"> Guardar </a>
</div>
<div class="col-v4 col-b1 botonesTeclado delete" id="deleteSmallScreen">
<a data-role="button" data-theme="b" class=" del"><img src="icons/delete3.png" /></a> <!-- width="100%" -->
</div>
</div>
</center>
</div>
Javascript:
var configureNumericKeyboard = function() {
$('#componenteTeclado').on('click', '.numero', function(){
console.log("Entrando en componenteTeclado");
if (!isNaN($('#lectNew').val().replace(",",".")) || $('#lectNew').val() === "-") {
$('#lectNew').val($('#lectNew').val() + $(this).text());
if($("#desplegable_opciones option:selected").val() != "false"){
limpiarMotivo();
}
}
});
I do not think that the operation I do is very difficult since I only concatenate the digit pressed to the digits of the box with the following line of code:
$('#lectNew').val($('#lectNew').val() + $(this).text());
From what I have been able to verify it seems that there are some clicks that the tablet does not recognize, as if the screen was "locked" in the milliseconds following one click.
Thank you very much for the help in advance, Greetings.
