Impossibile digitare il testo nei campi di input sul cellulare, ma funziona sul desktop

Question

Ho inserito una colorbox jQuery che visualizza un campo di immissione del testo, ma per qualche motivo non riesco a digitare il campo di input sul mio cellulare. Ma funziona sul mio desktop. Quando metto il cursore su un campo non si posiziona sul campo di input. Inizia invece un caricamento. E poi mi riporta alla posizione di default (la colorbox è ancora aperta e non posso posizionare il cursore sui campi di testo.L'unico modo in cui posso posizionare il cursore e il testo nel campo è trattenendo un po 'di tempo nel campo di testo. . Così posso incollare il testo nei campi di testo, ma non riesco a digitare

---

HTML (una forma che appare in 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 questo modulo colorbox):

#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 scatto del tasto gestore:

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

---

Aggiornamento:

Ho trovato il frammento di codice che causa problemi, ma non riesco a capire che cosa non va.

<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> 

Ad esempio, se imposto 30000 anziché 300, tutto funziona. Chi sa come risolvere correttamente il problema?

Answer 1

Invece di impostare un timeout, provare ad aspettare di eseguire il codice fino a dopo il caricamento della finestra. Dopotutto, è quello che (sto assumendo) che stai cercando di raggiungere con il timeout. Provare qualcosa sulla falsariga di:

$(document).ready(function(){ 

    //your script here 

}); 

Se questo non funziona, si può sempre inserire lo script su un timeout entro .ready(). In questo modo non dovrebbe essere un timeout lungo per poter continuare a funzionare.