无法在移动设备上的输入字段中键入文本,但可以在桌面上使用

Question

我放置了一个jQuery颜色框,它会调出一个文本输入字段,但由于某种原因,我无法输入我的手机上的输入字段.但它适用于我的桌面.当我将光标放在某个字段上时,它不会放在输入字段上.它开始一些加载.然后让我回到默认位置(颜色框仍然打开,我不能将光标放在文本字段上.我可以将光标和文本放入字段的唯一方法是在文本字段上保留一些时间.然后出现"粘贴"选项所以我可以在文本字段中粘贴文本,但我无法输入.

---

HTML(显示在彩盒中的表单):

<div class="compare" style="margin-top: 20px;"><a id="fast_order" href="#fast_order_form" class="button" />?????? ? 1 ????</a></div>    
    <div style="display:none">
        <div id="fast_order_form">       
            <input id="product_name" type="hidden" value="<?php echo $heading_title; ?>">
            <input id="product_price" type="hidden" value="<?php echo ($special ? $special : $price); ?>">
            <div class="fast_order_center"><?php echo $heading_title; ?> — ??? ?????</div>

        <div class="fast_order_left">
        <p>???:</p>
        <p>???????:</p>
        <p>???????????:</p>
        </div>

        <div class="fast_order_right">
        <p><input type="text" id="customer_name"/></p>
        <p><input type="text" id="customer_phone"/></p>
        <p><input type="text" id="customer_message"/></p>
        </div>

        <div class="fast_order_center">
        <p id="fast_order_result">??????????, ??????? ???? ??? ? ???????</p>
        <button class="fast_order_button"><span>???????????</span></button> 
        </div>
    </div>
</div>

---

CSS(此颜色框表单的CSS):

#fast_order_form .fast_order_left {
  display: inline-block;
  width: 29%;
  text-align: right;
}

#fast_order_form .fast_order_right {
  float: right;
  display: inline-block;
  width: 68%;
  text-align: left;
}
#fast_order_form .fast_order_right p {
  margin-bottom: 15px;
  padding: 0px;
}
#fast_order_form .fast_order_center {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 10px;
}
#fast_order_form #fast_order_result {
  color: #aaa;
  margin-bottom: 14px;
}
#fast_order_form #fast_order_result .fast_order_error {
  color: #f00;
}
#fast_order_form #fast_order_result .fast_order_success {
  color: #00d12a;
}
#fast_order_form p {
  margin-bottom: 22px;
  padding: 0px;
}

#fast_order_form input {
  margin: 0px;
  padding: 0px;
  height: 20px;
  width: 220px;
}

#fast_order_form .fast_order_button {
  font-size: 17px;
  cursor: pointer;
  height: 40px;
    width: 220px;
}

---

Colorbox按钮单击处理程序:

$(document).ready(function () {
    $('#fast_order').colorbox({href:"#fast_order_form",inline:true, width:"650px", height:"330px", class: "colorbox", title:" "});
    $('#fast_order_form .fast_order_center button').click(function () {
      var product_name = $('#product_name').val(); 
      var product_price = $('#product_price').val();
      var customer_name = $('#customer_name').val();
      var customer_phone = $('#customer_phone').val();
      var customer_message = $('#customer_message').val();
      $('#result').html('???????????? ????????? ??????..');
     // $.post('./fast_order.php', { 'product_name': product_name, 'product_price': product_price, 'customer_name': customer_name, 'customer_phone': customer_phone, 'customer_message': customer_message }, function (data) { if (data == 'empty') { $('#fast_order_result').html('<span class="fast_order_error">??????????? ??????? ???? ??? ? ???????, ????? ?? ?? ?????? ??? ???????????!</span>'); } else { $('#fast_order_result').html('<span class="fast_order_success">??? ????? ??????? ????????!</span><br /><span>?? ?????????? ??? ? ??????? ???. <a onclick="$(window).colorbox.close();">???????</a> ??? ?????</span>'); } });
    $.post('http://chico.esy.es/fast_order.php', { 'product_name': product_name, 'product_price': product_price, 'customer_name': customer_name, 'customer_phone': customer_phone, 'customer_message': customer_message }, function (data) { if (data == 'empty') { $('#fast_order_result').html('<span class="fast_order_error">??????????? ??????? ???? ??? ? ???????, ????? ?? ?? ?????? ??? ???????????!</span>'); } else { $('.fast_order_button').css('display','none'); $('#fast_order_result').html('<span class="fast_order_success">??? ????? ??????? ????????!</span><br /><span>?? ?????????? ??? ? ??????? ???. <a onclick="$(window).colorbox.close();">???????</a> ??? ?????</span>'); } });
    });
});

---

更新:

我发现导致问题的代码片段,但无法弄清楚什么是错误的.

<script type="text/javascript">
        jQuery.colorbox.settings.maxWidth  = '95%';
        jQuery.colorbox.settings.maxHeight = '95%';

        var resizeTimer;
        function resizeColorBox()
        {
            if (resizeTimer) clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                if (jQuery('#cboxOverlay').is(':visible')) {
                    jQuery.colorbox.load(true);
                }
            }, 300);
        }

        jQuery(window).resize(resizeColorBox);
        window.addEventListener("orientationchange", resizeColorBox, false);
    </script>

例如,如果我设置30000而不是300,一切正常.谁知道如何正确解决问题？

Answer 1

不要设置超时，而是尝试等待执行代码，直到窗口加载完成。毕竟，这就是（我假设）您试图通过超时来完成的任务。尝试一些类似的事情：

$(document).ready(function(){

    //your script here

});

如果这不起作用，您可以随时将脚本设置为超时.ready()。这样就不需要那么长时间的超时才能继续工作。