Nie można wpisywać tekstu do pól wejściowych na urządzeniu mobilnym, ale działa na pulpicie

Question

Umieściłem kolorową skrzynkę jQuery, która wyświetla pole wprowadzania tekstu, ale z jakiegoś powodu nie mogę wpisać pola wejściowego w telefonie komórkowym. Ale działa na moim pulpicie. Kiedy ustawiam kursor na pewnym polu, nie umieszcza on pola wejściowego. Zamiast tego zaczyna się ładowanie. A potem przywraca mnie do domyślnej pozycji (kolorbox jest nadal otwarty i nie mogę umieścić kursora na polach tekstowych Jedyny sposób umieszczenia kursora i tekstu w polu zajmuje trochę czasu na polu tekstowym, a następnie pojawia się opcja "Wklej" . Więc mogę wkleić tekst w polach tekstowych, ale nie mogę wpisać

---

HTML (formularz, który pojawia się w 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 dla w tej formie 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 kliknij przycisk obsługi:

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

---

Aktualizacja:

Znalazłem fragment kodu, który powoduje problem, ale nie mogę stwierdzić, co jest nie tak.

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

Na przykład, jeżeli ustawić 30000 zamiast 300 wszystko działa. Kto wie, jak rozwiązać problem?

Answer 1

Zamiast ustawiania limitu czasu, spróbuj czekać, aż kod zostanie wykonany, aż do zakończenia ładowania okna. Przecież to właśnie (zakładam) próbujesz osiągnąć z limitem czasu. Spróbuj coś wzdłuż linii:

$(document).ready(function(){ 

    //your script here 

}); 

Jeśli to nie zadziała, zawsze można umieścić swój skrypt na timeout ciągu .ready(). W ten sposób nie musiałby być tak długi czas oczekiwania na dalszą pracę.