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()内的超时时间。这样，为了仍然工作，它不需要超时。

无法在移动设备上输入文本到输入字段，但可以在桌面上输入

1 个答案: