jQuery UI datepicker导致屏幕在选择日期后滚动到顶部

我在jQuery对话框中有几个jQuery日期选择器。每当用户从日期选择器中选择日期时，屏幕将滚动到顶部。这只发生在IE8而不是Firefox 3.6或Chrome 5中。由于大多数用户会使用IE，这将会非常烦人。任何人都可以给我一个线索，为什么会发生这种情况？jQuery UI datepicker导致屏幕在选择日期后滚动到顶部

下面是HTML的对话框中的一个片段：

<div id="AppointmentDialog" style="display: none; font-size: 12px;"> 
    <table> 
     <tr class="lesson notAvailable allDay"> 
      <td> 
       Start 
      </td> 
      <td> 
       <input id="txtStartDate" type="text" readonly="readonly" style="width: 90px" class="lesson notAvailable allDay" /> 
       <input id="txtStartTime" type="text" style="width: 50px" class="lesson notAvailable" /> 
       <input id="hidStartTime" type="hidden" value="" /> 
      </td> 
     </tr> 
     <tr class="notAvailable allDay"> 
      <td> 
       End 
      </td> 
      <td> 
       <input id="txtEndDate" type="text" readonly="readonly" style="width: 90px" class="notAvailable allDay" /> 
       <input id="txtEndTime" type="text" style="width: 50px" class="notAvailable" /> 
       <input id="hidEndTime" type="hidden" value="" /> 
      </td> 
     </tr> 
    </table> 
</div>

JavaScript代码来初始化对话框并datepickers：

$(document).ready(function() { 
    initDialogs(); 
}); 

function initDialogs() { 
    // Configure the New Appointment dialog 
    $("#AppointmentDialog").dialog({ 
     autoOpen: false, 
     resizable: false, 
     width: 320, 
     modal: true, 
     title: 'Appointment', 
     buttons: { 
      "Close": function() { $(this).dialog("close"); }, 
      "Save": function() { 
       // Function call 
      } 
     } 
    }); 

    $.mask.definitions['h'] = '[012]'; 
    $.mask.definitions['m'] = '[]'; 
    $("#txtStartTime").mask("h9:m9"); 
    $("#txtEndTime").mask("h9:m9"); 

    // Init date pickers 
    $("#txtStartDate").datepicker({ dateFormat: 'dd-mm-yy' }); 
    $("#txtEndDate").datepicker({ dateFormat: 'dd-mm-yy' }); 
};

编辑

我使用jQuery 1.4 .2和UI 1.8.2

来源

2010-08-10 Phil Hale

我已经仔细研究过它。该错误已被reported with a workaround。

我使用jQuery UI的缩小版本，所以代码如下所示：

(B?" ui-priority-secondary":"")+'" href="#">'+q.getDate()+"</a>")+"</td>" 

(B?" ui-priority-secondary":"")+'" href="javascript:;">'+q.getDate()+"</a>")+"</td>"

来源

2010-09-23 09:36:47

感谢这个！你为我节省了很多时间！ – 2011-04-28 20:14:24

我有这个确切的问题，但真正的问题竟然是在页面上重复的ID。一旦我删除重复的ID，问题就完全消失了。

来源

2011-01-12 20:53:45 manu08

你需要重写“$”占位符“jQuery的”如果文本含有“＃”

来源

2017-02-07 18:09:07

欢迎来到SO。这应该是一个评论，而不是回答。 – 2017-02-07 18:32:46

我是不允许触摸的JS库，我说下onSelect处理这一行。

$('#ui-datepicker-div table td a').attr('href', 'javascript:;');

所以我的代码看起来像

  $('#txtDate').datepicker({ 
        // other properties 
        onSelect: function (selectedDate) { 
         $('#ui-datepicker-div table td a').attr('href', 'javascript:;'); 
         // other code 
        } 
       });

来源

2018-02-28 10:15:10 Imad

jQuery UI datepicker导致屏幕在选择日期后滚动到顶部

回答

相关问题