【发布时间】：2020-09-19 06:21:54
【问题描述】：
我检查了几个论坛和 MDN Element: click event 并尝试了 10 多个解决方案我知道这与 iOS 中的错误有关，谁能指导我或解释需要更改的内容，以便输出显示在 iOS/ Safari 移动版和桌面版。由于某种原因，此输出仅在单击按钮时显示在 Windows 和 Android 上，但在 iOS/Safari 环境中没有任何反应。
const firstItem = document.querySelector('#first-item')
const secondItem = document.querySelector('#second-item');
const year = document.querySelector('#year');
const btn = document.querySelector('.btn');
const output = document.querySelector('.output');
const outputText = document.querySelector('.output-text');
// footer date
const footerDate = document.querySelector('.footer-p');
let date = new Date().getFullYear();
window.addEventListener('DOMContentLoaded', function() {
getResult();
});
function getResult() {
btn.addEventListener('click', function(e) {
let firstItemValue = firstItem.value;
let secondItemValue = secondItem.value;
let yearValue = year.value;
// 30 percent off first item
function thirtyPercentOff() {
return firstItemValue * .7
}
// add cost
function addCost() {
return secondItemValue * parseInt(yearValue)
}
// define result and too expensive
let result = Math.floor(thirtyPercentOff() - addCost());
let expensive = addCost() > (thirtyPercentOff() / 5);
// result with commas
function numberWithCommas(result) {
return result.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");
}
// in case of discrepancy and the cost is higher then the first item price / 5
if (result < 0 || expensive) {
output.textContent = `*This item has additional costs: $${numberWithCommas(addCost())}`
output.classList.add('cover')
} else if (firstItemValue !== '' && secondItemValue !== '') {
// max cash offer
output.textContent = `$${numberWithCommas(result)}`
output.classList.remove('cover')
}
})
}* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
body {
cursor: pointer;
}
.main {
margin-top: 20px;
padding: 10px 10px 10px 10px;
font-size: 20px;
font-family: BlinkMacSystemFont;
margin: auto;
width: 500px;
border-radius: 5px;
background-color: #f2f2f2;
margin-bottom: 140px;
}
img {
width: 200px;
}
header {
text-align: center;
margin: 20px 0px;
font-family: 'Open Sans';
}
header h2 {
font-size: 34px;
}
header h3 {
margin: 20px 0px;
}
p.comment {
margin: 8px 0px;
font-size: 12px;
}
input[type=text],
select {
font-size: 18px;
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button.btn {
font-size: 18px;
width: 100%;
background-color: #306cec;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
}
.clickable {
cursor: pointer;
}
.output-text {
font-family: 'Open Sans';
}
.output-text {
margin-right: 40px;
float: right;
}
.cover {
background-color: #ce3e06;
color: white;
height: 100px;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
background-color: #306cec;
color: white;
text-align: center;
}
.footer-p {
margin: 40px 0px;
text-align: center;
}
/**** media queries *****/
/* Media Query for Mobile Devices */
@media (max-width: 480px) {
.footer {
display: none;
}
.main {
width: 300px;
padding: 20px 30px 50px 30px;
}
.output-offer {
padding: 0px 0px 180px 0px;
}
}
/* Media Query for low resolution Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {
.main {
width: 500px;
padding: 20px 30px 30px 30px;
}
}
/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {
.main {
width: 500px;
padding: 20px 30px 30px 30px;
}
}
/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px) {
.main {
width: 500px;
padding: 20px 30px 30px 30px;
}
}
/* Media Query for Large screens */
@media (min-width: 1281px) {
.main {
width: 500px;
padding: 20px 30px 30px 30px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css">
<link rel="shortcut icon" href="#" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Name</title>
</head>
<body>
<section class="main">
<header>
<img src="#" alt="img">
<h2>Form Name</h2>
</header>
<form>
<!-- label first-item -->
<label for="first-item">Item Price</label>
<input type="text" class="form-control" id="first-item" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" placeholder="item price in $" required/>
<!-- label second-item -->
<label for="second-item">second item value</label>
<input type="text" class="form-control" id="second-item" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" placeholder="Enter second value" required/>
<label for="year">Year</label>
<select id="year">
<option value="35">1985</option>
<option value="65">1975 - 1985</option>
<option value="75">1975</option>
</select>
<button type="submit" href="#" onclick="event.preventDefault(); return false;" class="btn clickable">Submit</button>
<!-- <btn "> -->
</form>
<h3 class="output" href="#footer_id">
<span>Output:</span> <span class="output-text"></span>
</h3>
</section>
<!-- end of section-->
<script src="./app.js"></script>
</body>
</html>【问题讨论】：
-
从其他来源获得答案后，Safari 不支持正则表达式，因此必须将其删除，并且使用 jQuery 而不是 JavaScript 作为点击事件。而不是 onclick="event.preventDefault(); 我使用 onclick="javascript: return false;" 现在这个解决方案有效......下面的工作示例在 ios/chrome/win 环境中进行了测试。
标签： javascript html css safari