#javascript #forms #mobile
#javascript #формы #Мобильный
Вопрос:
На моей странице у меня есть две формы (обе на главной странице)
Все отлично работает в браузерах ноутбуков, но я не могу ничего вводить в поля ввода на мобильных устройствах. Как вы можете видеть, отображаются поля ввода, и я предполагаю, что это как-то связано с css. Но я не уверен.
Сайт находится здесь: https://fairbenzin.dk
Я добавил код ниже.
Заранее благодарю.
getPrice = function() {
var b_rabat1 = 166;
var b_rabat2 = 167;
var b_rabat3 = 168;
var b_rabat4 = 170;
var d_rabat1 = 176;
var d_rabat2 = 177;
var d_rabat3 = 179;
var d_rabat4 = 182;
var benzinpris = 10;
var dieselpris = 9;
var antalkm = 15;
var totalbenzinbefore = 0;
var totaldieselbefore = 0;
var resultprocentbenzin = 0;
var resultprocentdiesel = 0;
var numVal1 = (Number(document.getElementById("antal_km_total").value) / antalkm);
//BENZINUDREGNING
var bresult = 0
totalbenzinbefore = (benzinpris * numVal1);
if (numVal1 <= 10000) {
bresult = ((b_rabat1 * numVal1) / 100);
resultprocentbenzin = ((bresult/totalbenzinbefore) * 100);
}
else if (numVal1 > 10000 amp;amp; numVal1 <= 50000) {
bresult = ((b_rabat2 * numVal1) / 100);
resultprocentbenzin = ((bresult/totalbenzinbefore) * 100);
}
else if (numVal1 > 50000 amp;amp; numVal1 <= 100000) {
bresult = ((b_rabat3 * numVal1) / 100);
resultprocentbenzin = ((bresult/totalbenzinbefore) * 100);
}
else if (numVal1 > 100000 amp;amp; numVal1 <= 200000) {
bresult = ((b_rabat4 * numVal1) / 100);
resultprocentbenzin = ((bresult/totalbenzinbefore) * 100);
}
else {
bresult = 18;
resultprocentbenzin = 18;
}
//DIESELUDREGNING
var dresult = 0
totaldieselbefore = (dieselpris * numVal1)
if (numVal1 <= 10000) {
dresult = ((d_rabat1 * numVal1) / 100);
resultprocentdiesel = ((dresult/totaldieselbefore) * 100);
}
else if (numVal1 > 10000 amp;amp; numVal1 <= 50000) {
dresult = ((d_rabat2 * numVal1) / 100);
resultprocentdiesel = ((dresult/totaldieselbefore) * 100);
}
else if (numVal1 > 50000 amp;amp; numVal1 <= 100000) {
dresult = ((d_rabat3 * numVal1) / 100);
resultprocentdiesel = ((dresult/totaldieselbefore) * 100);
}
else if (numVal1 > 100000 amp;amp; numVal1 <= 200000) {
dresult = ((d_rabat4 * numVal1) / 100);
resultprocentdiesel = ((dresult/totaldieselbefore) * 100);
}
else {
dresult = 18;
resultprocentdiesel = 18;
}
document.getElementById("total").value = bresult.toFixed(2);
document.getElementById("besparelse").value = resultprocentbenzin.toFixed(1);
document.getElementById("total2").value = dresult.toFixed(2);
document.getElementById("besparelse2").value = resultprocentdiesel.toFixed(1);
} <style>
#calculator p {
font-size: 0.840rem;
margin-bottom: 0px;
}
.kategori{
font-weight: bold;
}
.disclaimer{
text-align: center;
padding: 2%;
background-color: #eeeeee!important;
border-radius: 5px;
}
</style> <!Doctype html>
<html>
<div id="calculator">
<h2>Brændstofberegner</h2>
<p>Hvor mange km. kører du om året i alt?</p>
<input id="antal_km_total" type="tel">
<input onclick="getPrice()" type="submit" value="Beregn rabat på benzin og diesel" class="wpcf7-form-control wpcf7-submit">
<p class="kategori">Besparelse på benzin</p>
<p>Op til kroner i besparelse</p>
<input readonly id="total" type="tel">
<p>Op til % besparelse</p>
<input readonly id="besparelse" type="tel">
<p class="kategori">Besparelse på diesel</p>
<p>Op til kroner i besparelse</p>
<input readonly id="total2" type="tel">
<p>Op til % besparelse</p>
<input readonly id="besparelse2" type="tel">
<p class="disclaimer">Vores beregner er baseret ud fra en standerpris på 9 DDK. pr. liter diesel, 10 DKK. pr. liter benzin og et gennemsnit på 15 km pr. liter. Vi tager forbehold for usikkerhed i beregning og besparelser skal derfor ses som vejledende. Ved et forbrug på mere end 200.000 liter brændstof fastsættes individuel rabat.</p>
</div>
</html> Комментарии:
1. Большинство входных данных помечены как доступные только для чтения, вы не можете вводить что-либо в эти входные данные ни в какой среде. Не могли бы вы немного уточнить вопрос, что именно вы хотите, чтобы ваш код делал, и что он делает вместо этого?
2. Привет, Теему. Спасибо за ответ. Если вы можете увидеть, что он делает в предоставленном фрагменте кода, он вычисляет некоторую экономию топлива. В этом скрипте последние четыре поля ввода доступны только для чтения, поскольку это поля результатов. Но я ничего не могу ввести в первое поле, но только на мобильных устройствах. В этом проблема.
3. Я не могу воспроизвести вашу проблему, см. Ваш код, работающий в jsFiddle .
4. Ах. Он также работает на моем телефоне, я этого не видел. Но он по-прежнему не запускается на fairbenzin.dk по какой-то причине.
Ответ №1:
Я видел ваш веб-сайт Http: //farbenzine.dk / У меня есть проблема
Этот класс становится активным в мобильном представлении, поэтому вам нужно удалить его или перейти к файлу css и прокомментировать этот класс.custom-header-overlay
Комментарии:
1. Привет, Анкит Тивари. Похоже, это проблема. Большое вам спасибо. Я буду работать с css там.
Ответ №2:
я также столкнулся с этой проблемой, поэтому протестируйте эти поля ввода только в HTML.
если это работает, то серверная часть полностью в порядке, поэтому проблема будет внутри CSS или Js, я много раз видел, как интерфейс искажался и выдавал ошибку, мы думали, что это для кода lol, но это не так… Для целей отладки выведите относительные данные в консоль …это очень помогает, спасибо