JavaScript焦点事件第一次不会聚焦，而第二次会聚焦。

huangapple
go评论161阅读模式
英文:

javascript focus event is not focusing first time its focus at the second time

问题

我面临JavaScript事件焦点和失焦的问题，我试图在输入字段文本上运行一个脚本，该字段具有来自jqeuryUi的日期下拉菜单。我试图应用一个条件，即如果用户选择今天的日期，那么我必须运行该脚本，否则不运行该脚本。

https://camelia.ae/checkout/
这是网站的链接，请尝试将某些内容添加到购物车中。

  1. <script>
  2.     document.addEventListener("DOMContentLoaded", function() {
  3.       var deliveryDateInput = document.getElementById("delivery_date");
  5.       deliveryDateInput.addEventListener("focus", function() {
  6.         // 移除先前的失焦事件监听器，如果有的话
  7.         this.removeEventListener("blur", handleDateBlur);
  8.         
  9.         // 添加失焦事件监听器
  10.         this.addEventListener("blur", handleDateBlur);
  11.       });
  13.       function handleDateBlur() {
  14.         var selectedDateParts = this.value.split("/");
  15.         var selectedDate = new Date(selectedDateParts[2], selectedDateParts[1] - 1, selectedDateParts[0]);
  16.         var today = new Date();
  17.         today.setHours(0, 0, 0, 0);
  19.         if (selectedDate.getTime() === today.getTime()) {
  20.           alert("你好！你选择了今天的日期。");
  21.         }
  22.       }
  23.     });
  24. </script>

我编写了这段代码，我试图在今天的日期上显示警报。我面临的问题是，这段代码工作，但第一次选择时不显示任何内容，但第二次选择时会显示警报。有人可以告诉我解决方法吗？

英文:

i am facing a problem in javascript event focus and blur i am trying to run a script in a if else condition on a input field text which has a date drop down coming from jqeuryUi i am trying to apply a condition in which if the the user select the today date then i have to run the script otherwise dont run the script
https://camelia.ae/checkout/
here is the link of the website try to add something in the cart

  1. &lt;script&gt;
  2.     document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
  3.       var deliveryDateInput = document.getElementById(&quot;delivery_date&quot;);
  5.       deliveryDateInput.addEventListener(&quot;focus&quot;, function() {
  6.         // Remove the previous blur event listener, if any
  7.         this.removeEventListener(&quot;blur&quot;, handleDateBlur);
  8.         
  9.         // Attach the blur event listener
  10.         this.addEventListener(&quot;blur&quot;, handleDateBlur);
  11.       });
  13.       function handleDateBlur() {
  14.         var selectedDateParts = this.value.split(&quot;/&quot;);
  15.         var selectedDate = new Date(selectedDateParts[2], selectedDateParts[1] - 1, selectedDateParts[0]);
  16.         var today = new Date();
  17.         today.setHours(0, 0, 0, 0);
  19.         if (selectedDate.getTime() === today.getTime()) {
  20.           alert(&quot;Hello! You&#39;ve selected today&#39;s date.&quot;);
  21.         }
  22.       }
  23.     });
  24. &lt;/script&gt;

i have written this code in which i am trying to show the alert on the today date the problem i am facing is that this code is working but on the second time whe i select first time its shows nothing but when i click second time its show alert
can anyone tell me the solution of this

  1. &lt;script&gt;
  2.     document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
  3.       var deliveryDateInput = document.getElementById(&quot;delivery_date&quot;);
  5.       deliveryDateInput.addEventListener(&quot;focus&quot;, function() {
  6.         // Remove the previous blur event listener, if any
  7.         this.removeEventListener(&quot;blur&quot;, handleDateBlur);
  8.         
  9.         // Attach the blur event listener
  10.         this.addEventListener(&quot;blur&quot;, handleDateBlur);
  11.       });
  13.       function handleDateBlur() {
  14.         var selectedDateParts = this.value.split(&quot;/&quot;);
  15.         var selectedDate = new Date(selectedDateParts[2], selectedDateParts[1] - 1, selectedDateParts[0]);
  16.         var today = new Date();
  17.         today.setHours(0, 0, 0, 0);
  19.         if (selectedDate.getTime() === today.getTime()) {
  20.           alert(&quot;Hello! You&#39;ve selected today&#39;s date.&quot;);
  21.         }
  22.       }
  23.     });
  24. &lt;/script&gt;

i have written this code in which i am trying to show the alert on the today date the problem i am facing is that this code is working but on the second time whe i select first time its shows nothing but when i click second time its show alert
can anyone tell me the solution of this

答案1

得分: 1

以下是代码的翻译部分：

  1. let date = document.querySelector('#delivery_date');
  3. date.addEventListener('change', onDateChange)
  5. function getFormattedDate() {
  6.     const today = new Date();
  7.     const year = today.getFullYear();
  8.     const month = (today.getMonth() + 1).toString().padStart(2, '0'); // 月份是从零开始计数的
  9.     const day = today.getDate().toString().padStart(2, '0');
  11.     return `${year}-${month}-${day}`;
  12. }
  13. const formattedDate  = getFormattedDate()
  15. function onDateChange(e) {
  16.     let selectedDate = e.target.value;
  17.     if(selectedDate === formattedDate) {
  18.         alert("你好！你选择了今天的日期。");
  19.     }
  20. }

注意：在代码中，我将变量formatedDate改为了formattedDate以修正拼写错误。

英文: 
  1. &lt;script&gt;
  2.    let date = document.querySelector(&#39;#delivery_date&#39;);
  4.    date.addEventListener(&#39;change&#39;, onDateChange)
  6.    function getFormattedDate() {
  7.         const today = new Date();
  8.         const year = today.getFullYear();
  9.         const month = (today.getMonth() + 1).toString().padStart(2, &#39;0&#39;); // Months are zero-based
  10.         const day = today.getDate().toString().padStart(2, &#39;0&#39;);
  12.         return `${year}-${month}-${day}`;
  13.     }
  14.     const formatedDate  = getFormattedDate()
  16.     function onDateChange(e) {
  17.         let selectedDate = e.target.value;
  18.         if(selectedDate === formatedDate) {
  19.             alert(&quot;Hello! You&#39;ve selected today&#39;s date.&quot;);
  20.         }
  21.    }
  22. &lt;/script&gt;

huangapple
  • 本文由 发表于 2023年8月10日 18:47:24
  • 转载请务必保留本文链接：https://go.coder-hub.com/76875003.html
  • javascript
  • jquery
  • wordpress
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定