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

Question

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

---

HTML(出现在 colorbox 中的一种形式):

<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() 内将您的脚本设置为超时。这样它就不必为了继续工作而超时那么长。