HTML输入栏第一次点击时不会注册

编程问答 2022-08-10

问题描述

我在开始日期字段上遇到问题。首次加载页面时，如果单击“开始日期”字段，则不会弹出日历，但是，如果我单击任何其他字段/标签，然后单击“返回开始”字段，则效果很好。我尝试了以下失败的尝试：

1-我尝试使用onclick和onchange调用js函数 2-我很想在页面加载时将一个侦听器添加到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>

解决方法

由于我看到您正在使用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>

似乎您正在自动关闭标签，这可能会导致问题。

,

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

htmljavascriptjquery-ui-datepicker