Question

我正在制作一个Spring Boot应用程序，并使用HTML来更新我的视图。在这里，我尝试使用input type date以html形式实现本机datepicker，用户将选择日期，然后页面将刷新并提交带有选定日期作为url参数的表单。

表单中的文本框还将以页面刷新后我需要的格式显示在datepicker中选择的值。

它的制作方式是，不应使用提交按钮来提交表单，并且一旦用户从input字段中选择了日期，页面便应自动刷新并在url中保存值参数以及表单中的文本框。

下面是我的代码：

HTML：

<form action="#" id="myForm" method="get">
    <input type="text" id="save-date" name="show_date" class="form-control"> 
    <input type="date" onchange="changeDateFormat()" name="date" class="form-control"></input>
</form>

Javascript：

<script type="text/javascript">
    function changeDateFormat(){
        var received_date = document.getElementById("date-input").value;
        var split_dashes = received_date.split('-');
        var final_date = split_dashes[2]+'.'+split_dashes[1]+'.'+split_dashes[0]
        document.getElementById("show_date").value = final_date;
        document.getElementById("myForm").submit();
    }
</script>

我的问题

这在ios / iphone 8以外的所有平台上都很好用。在ios / iphone 8上，只要单击输入类型日期字段，datepicker就会立即打开并快速刷新页面。我希望它等待我的输入，但不允许我输入。相反，它会快速调用js函数并刷新页面。

我不会在chrome或任何其他浏览器中遇到此问题。在Chrome中，日期选择器将作为日历打开，它将等待我选择日期。

我尝试过的事情

我尝试了一整夜和今天的一半来了解为什么会发生这种情况。似乎在ios datepicker中，一旦单击打开下拉选择器，它就会迅速选择日期。除此之外，我尝试实现jquery函数，但其工作方式相同。我也尝试过onselect，oninput，但没有任何效果。

我是javascript的初学者，这让我从昨晚开始变得疯狂。我已经很接近要开始工作了，但感觉还很遥远。

我的方法 解决此问题的一种方法是仔细观察iphone中的datepicker，我发现它一打开电话中的datepicker，就会立即选择日期，这也许就是它调用javascript函数的原因。

但是，如果它可以等我选择日期，直到我在日期选择器中按“完成”（在iPhone中显示），该问题就可以消除

请指导我如何解决此问题

Answer 1

对于将来也有相同问题的任何人。只需尝试使用onblur事件而不是onchange触发功能。 onchange在这里不起作用，因为在iphone中，尝试移动日期选择器微调器以选择日期时，该字段会立即更新。因此，使用onblur会一直等到用户有意关闭日期选择器后才调用函数。

谢谢。

在我在Iphone中选择日期之前，HTML输入类型的日期会调用javascript函数

1 个答案: