Question

早上好，

目前我已经使用html5，Javascript和jQuery为Firefox开发了一个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());

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

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

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();
        }
    }
});

从平板电脑上点击数字小键盘会丢失一些

1 个答案: