简体   繁体   English

输入字段在移动设备上不起作用

[英]Input field are not working on mobile devices

On my page I have two forms (both on front page)在我的页面上,我有两个 forms(都在首页)

Everything is working great on laptop browsers, but I can't text anything in the input fields on mobile devices.在笔记本电脑浏览器上一切正常,但我无法在移动设备的输入字段中输入任何内容。 As you can see, the input fields are showing and I'm therefor assuming this has something to do with css.如您所见,输入字段正在显示,因此我假设这与 css 有关。 But I'm not sure.但我不确定。

The site is here: https://fairbenzin.dk该网站在这里: https://fairbenzin.dk

I added the code to down below.我将代码添加到下面。

Thank in advance.预先感谢。

 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 && numVal1 <= 50000) { bresult = ((b_rabat2 * numVal1) / 100); resultprocentbenzin = ((bresult/totalbenzinbefore) * 100); } else if (numVal1 > 50000 && numVal1 <= 100000) { bresult = ((b_rabat3 * numVal1) / 100); resultprocentbenzin = ((bresult/totalbenzinbefore) * 100); } else if (numVal1 > 100000 && 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 && numVal1 <= 50000) { dresult = ((d_rabat2 * numVal1) / 100); resultprocentdiesel = ((dresult/totaldieselbefore) * 100); } else if (numVal1 > 50000 && numVal1 <= 100000) { dresult = ((d_rabat3 * numVal1) / 100); resultprocentdiesel = ((dresult/totaldieselbefore) * 100); } else if (numVal1 > 100000 && 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>

I saw your website Http: //farbenzine.dk/ I got the problem我看到你的网站 Http: //farbenzine.dk/ 我有问题

This class becomes active in mobile view So you have to delete it or else go to css file and comment this class.custom-header-overlay 此 class 在移动视图中变为活动状态,因此您必须将其删除,否则 go 到 css 文件并评论此 ZA2F2ED4F28EBC2C1DBB4C2。

i have faced these issue also so test these input fields in HTML only.我也遇到了这些问题,因此仅在 HTML 中测试这些输入字段。

if it's working then the back end part is completely fine so problem will be inside the CSS or the Js, i have seen many time the front end distorted and produce a bug, we thought it's for code lol, but it's not... For debug purpose, print relative data in console...it helps a lot Thank You如果它正常工作,那么后端部分完全没问题,所以问题将在 CSS 或 Js 内部,我已经看到很多次前端扭曲并产生错误,我们认为这是代码大声笑,但它不是......调试目的,在控制台打印相关数据......它有很大帮助谢谢

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM