平板电脑数字键盘上的某些点击丢失

Question

早上好，

目前我已经为 Firefox 开发了一个带有 html5、Javascript 和 jQuery 的 web 应用程序。该应用程序可在平板设备和计算机上使用。

在其中一个屏幕中，我创建了一个数字键盘（以避免必须使用平板电脑上的那个），它可以引入数字并在不同的测量值之间导航。

这是键盘在屏幕上的显示方式：

当用户想要快速输入数字时，问题就出现了。它不会发生在计算机上，而是在平板电脑上当以下数字被如此快速地按下时：1、2、3、4、5、6（例如）只有一些被检测到，而另一些则丢失了。但是，如果用户每秒钟输入一个数字，他们都会被识别出来。

我附上 html 和 javascript 代码，以防有人知道为什么会发生这种情况：

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">&#60;&#60; </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">&#60;</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">&#62;</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">&#62;&#62;</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();
                    }
                }
    });

我不认为我做的操作很困难，因为我只是用下面这行代码将按下的数字与框的数字连接起来：

$('#lectNew').val($('#lectNew').val() + $(this).text());

从我能够验证的情况来看，似乎有一些点击平板电脑无法识别，好像屏幕在点击后的毫秒内被“锁定”了。

非常感谢您提前提供的帮助， 问候。

Answer 1

更改您的代码以处理鼠标按下事件，而不是单击事件。这个问题经常发生在触摸屏设备上，因为点击事件会等待用户从屏幕上抬起手指，这会出现滞后或延迟的现象，并且如果他们在抬起手指之前触摸到其他地方也会导致问题（对于更快的用户）。

$('#componenteTeclado').on('mousedown', '.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();
        }
    }
});