我在开始日期字段方面遇到问题。第一次加载页面时，如果您单击开始日期字段，日历不会弹出，但是如果我单击任何其他字段/标签，然后单击开始日期字段，它就可以正常工作。我尝试了以下但没有成功:
1- 我试过使用 onclick 和 onchange 来调用 js 函数 2- 我有 tird 在页面加载时向 beginDate 元素添加一个监听器。 3- 尝试在页面加载时将焦点移动到另一个元素。
var tripsByCategory = {
1: ["3", "5"],
2: ["2", "3", "4"],
3: ["5", "7"]
}
function changecat(value) {
if (value.length == 0) document.getElementById("duration").innerHTML = "<option></option>";
else {
var catOptions = "";
for (categoryId in tripsByCategory[value]) {
catOptions += "<option>" + tripsByCategory[value][categoryId] + "</option>";
}
document.getElementById("duration").innerHTML = catOptions;
}
}
function datePicker() {
$('#beginDate').datepicker({dateFormat: "yy-mm-dd"});
}
function clearPage() {
var form = document.getElementById("costForm");
form.onsubmit = form.reset();
document.addEventListener("click", function() {
datePicker();
//alert("yay");
}, true);
document.getElementById("beginDate").addEventListener("click", function() {
datePicker();
}, false);
}body{
background-color: #7fc7d6;
}
.sectionTitle{
text-align: center;
}
.column3 {
float: left;
width: 100%;
padding: 2px;
}
.row::after {
display: table;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="index.js"></script>
<link href= 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' rel='stylesheet'>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
</head>
<body onLoad="clearPage()">
<div class="row">
<h2 class="column3">!Testing</h2>
<form action="http://localhost:8080//places" method=GET id="costForm">
<div class="column3">
<label for="numberOfPeople">Number of Travelers:</label>
<input type="number" id="numberOfPeople" name="numberOfPeople" min="1" max="10" required />
</div>
<div class="column3">
<label for="beginDate">Begin Date:</label>
<input type="text" name="beginDate" id="beginDate" value="YYYY-MM-DD" required />
</div>
<div class="column3">
<label for="hikeOption">Choose a Destenation:</label>
<select name="hikeOption" id="hikeOption" onclick="changecat(this.value);" required >
<option value="" disabled selected>Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="column3">
<label for="duration">Choose a Duration:</label>
<select name="duration" id="duration" required>
<option value="" disabled selected>Select</option>
</select>
</div>
<div class="column3">
<input type="SUBMIT" value="Get Total Cost">
</div>
</form>
</div>
</body>
</html>最佳答案
改用事件 mousedown 即可解决问题。这是一个与 jquery 无关的常见问题。但它可能无法在手机上完美运行，您还必须添加 touch 事件，请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Touch_events .
var tripsByCategory = {
1: ["3", "5"],
2: ["2", "3", "4"],
3: ["5", "7"]
}
function changecat(value) {
if (value.length == 0) document.getElementById("duration").innerHTML = "<option></option>";
else {
var catOptions = "";
for (categoryId in tripsByCategory[value]) {
catOptions += "<option>" + tripsByCategory[value][categoryId] + "</option>";
}
document.getElementById("duration").innerHTML = catOptions;
}
}
function datePicker() {
$('#beginDate').datepicker({dateFormat: "yy-mm-dd"});
}
function clearPage() {
var form = document.getElementById("costForm");
form.onsubmit = form.reset();
document.getElementById("beginDate").addEventListener("mousedown", function() {
datePicker();
}, false);
}body{
background-color: #7fc7d6;
}
.sectionTitle{
text-align: center;
}
.column3 {
float: left;
width: 100%;
padding: 2px;
}
.row::after {
display: table;
}<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="index.js"></script>
<link href= 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' rel='stylesheet'>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src= "https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"> </script>
</head>
<body onLoad="clearPage()">
<div class="row">
<h2 class="column3">!Testing</h2>
<form action="http://localhost:8080//places" method=GET id="costForm">
<div class="column3">
<label for="numberOfPeople">Number of Travelers:</label>
<input type="number" id="numberOfPeople" name="numberOfPeople" min="1" max="10" required />
</div>
<div class="column3">
<label for="beginDate">Begin Date:</label>
<input type="text" name="beginDate" id="beginDate" value="YYYY-MM-DD" required />
</div>
<div class="column3">
<label for="hikeOption">Choose a Destenation:</label>
<select name="hikeOption" id="hikeOption" onclick="changecat(this.value);" required >
<option value="" disabled selected>Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="column3">
<label for="duration">Choose a Duration:</label>
<select name="duration" id="duration" required>
<option value="" disabled selected>Select</option>
</select>
</div>
<div class="column3">
<input type="SUBMIT" value="Get Total Cost">
</div>
</form>
</div>
</body>
</html>关于javascript - 第一次单击时未注册的 HTML 输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64529638/