my97DatePicker日期控件——日期输入框联动，使用focus使第二个输入框没展示出日期控件...

水深无声 2021-12-15 06:25 222阅读 0赞

**描述问题场景：**

**　　1.jquery使用的版本是jquery-1.7.2.min.js**

**　　2.代码不是写在页面上的，是通过事件后追加的**

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
     7         <script src="js/My97DatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
     8     </head>
     9     <body>
    10         <div class="main">
    11             
    12         </div>
    13         <input type="button" id="ceshi" value="点击" onclick="ceshiClick()"/>
    14     </body>
    15     <script type="text/javascript">
    16         var str = "<input id='d4315' class='time_start Wdate clearInput' type='text' onFocus=\"WdatePicker({maxDate:'#F{$dp.$D(\\'d4316\\')||\\'%y-%M-%d\\'}',onpicked:function(){$('#d4316').focus();}})\"><span>-</span><input id='d4316' class='time_end Wdate clearInput' type='text' onFocus=\"WdatePicker({maxDate:'%y-%M-%d',minDate:'#F{$dp.$D(\\'d4315\\')}'})\">";
    17         function ceshiClick(){
    18             $('.main').html(str);    
    19         }
    20     </script>
    21 </html>

出现问题源代码

复制上述代码运行发现：选择第一个日期输入框值后，第二个输入框获取了焦点，但是它并没有执行第二个输入框的焦点事件，使得日期控件展示出来；但是在官网的描述和介绍中发现写法并没有问题

**解决过程：**

**　　此问题是在项目开发中遇到的，便在自己本地开始测试，防止是项目中的别的问题影响，在本地测试发现不管是直接写在页面的文档流中还是后追加进去的都没有问题，唯一的不同之处是我本地测试用的是jquery-1.12.3.min.js版本，测试发现更改了jquery版本解决了此问题**

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <script src="jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
     7                 <script src="js/My97DatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
     8     </head>
     9     <body>
    10         <div class="main">
    11             
    12         </div>
    13         <input type="button" id="ceshi" value="点击" onclick="ceshiClick()"/>
    14     </body>
    15     <script type="text/javascript">
    16         var str = "<input id='d4315' class='time_start Wdate clearInput' type='text' onFocus=\"WdatePicker({maxDate:'#F{$dp.$D(\\'d4316\\')||\\'%y-%M-%d\\'}',onpicked:function(){$('#d4316').focus();}})\"><span>-</span><input id='d4316' class='time_end Wdate clearInput' type='text' onFocus=\"WdatePicker({maxDate:'%y-%M-%d',minDate:'#F{$dp.$D(\\'d4315\\')}'})\">";
    17         function ceshiClick(){
    18             $('.main').html(str);    
    19         }
    20     </script>
    21 </html>

jquery1.12版本

为了测试问题的真正存在，将第二个输入框中的onFocus的事件改成普通事件，发现它可以正常运行，而改成my97的方法则不行，那么导致此问题的应该是my97的方法吧

**解决方法总结：**

1.如果坚持使用**jquery-1.7.2.min.js**版本，则在第一个输入框的onpicked事件中，使用原生js实现，即$('\#d4316').get(0).focus();

2.要么使用高版本的jquery

注：导致此问题出现的真正原因尚未找到

转载于:https://www.cnblogs.com/eyunhua/p/5762066.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211214/b0076d3bef604d20adfc98eee7cc36ab.png