Html 输入字段在第一次点击时未注册

Question

我对开始日期字段有疑问。第一次加载页面时，如果您单击开始日期字段，则日历不会弹出，但是如果我单击任何其他 field/label 然后再单击开始日期字段，它就可以正常工作。我尝试了以下但没有成功：

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>

Answer 1

因为我看到您正在使用 jQuery 我的建议是使用事件侦听器。

创建文档就绪函数：

$(document).ready(function(){

});

然后在该函数内部，添加侦听器函数

$(document).ready(function(){
    $('#beginDate').click("off").click(function(){
        //Process data
    });
});

编辑：此外，您可能希望通过语法检查器运行您的代码，例如：https://validator.w3.org/

我提出这个问题是因为 html select 的语法不正确，应该是

<select>
    <option value="val1">Option Label</option>
</select>

您似乎是 self-closing 标签，这可能会导致问题。

Answer 2

改用事件 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>

Html 输入字段在第一次点击时未注册

Html input field not registring on first click

html

javascript

jquery-ui-datepicker