Back Space 在日期选择器中重定向到 chrome 上的上一页

Question

我正在使用日期选择器选择 2 个日期的日期......同时单击退格键，我正在清除文本框值......在 Firefox 中它工作正常，但在 chrome 中它重定向到我的上一页。

$().ready(function() {

            var dates = $("#TestDateFrom, #TestDateTo").datepicker({
                changeMonth: true,
                numberOfMonths: 1,
                onSelect: function(selectedDate) {
                    var option = this.id == "TestDateFrom" ? "minDate" : "maxDate",
                    instance = $(this).data("datepicker"),
                    date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings);
                    dates.not(this).datepicker("option", option, date);
                }
            });

            $("#TestDateFrom").keypress(function(e) {
                switch (e.keyCode) {
                    case 8:
                        $("#TestDateFrom").val("");  // backspace
                        break;
                    default:
                        e.preventDefault();
                        break;
                }
            });

            $("#TestDateTo").keypress(function(e) {
                switch (e.keyCode) {
                    case 8:
                        $("#TestDateTo").val("");  // backspace
                        break;
                    default:
                        e.preventDefault();
                        break;
                }
            });


        })

Answer 1

jquery 中触发按键、按键向上、按键按下的事件取决于浏览器。因此，在这三个事件中触发事件以获得稳定的结果...

试试这个

$().ready(function() {

            var dates = $("#TestDateFrom, #TestDateTo").datepicker({
                changeMonth: true,
                numberOfMonths: 1,
                onSelect: function(selectedDate) {
                    var option = this.id == "TestDateFrom" ? "minDate" : "maxDate",
                    instance = $(this).data("datepicker"),
                    date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings);
                    dates.not(this).datepicker("option", option, date);
                }
            });

            $("#TestDateFrom").keyup(function(e) {
                switch (e.keyCode) {
                    case 8:
                        $("#TestDateFrom").val("");
                        e.preventDefault();  // backspace
                        break;
                    default:
                        e.preventDefault();
                        break;
                }
            });
            $("#TestDateFrom").keydown(function(e) {
                switch (e.keyCode) {
                    case 8:
                        $("#TestDateFrom").val("");  // 
                        e.preventDefault();
                        break;
                    default:
                        e.preventDefault();
                        break;
                }
            });

            $("#TestDateFrom").keypress(function(e) {
                switch (e.keyCode) {
                    case 8:
                        $("#TestDateFrom").val("");  // backspace
                        e.preventDefault();
                        break;
                    default:
                        e.preventDefault();
                        break;
                }
            });

            $("#TestDateTo").keypress(function(e) {
                switch (e.keyCode) {
                    case 8:
                        $("#TestDateTo").val("");  // backspace
                        e.preventDefault();
                        break;
                    default:
                        e.preventDefault();
                        break;
                }
            });

            $("#TestDateTo").keyup(function(e) {
                switch (e.keyCode) {
                    case 8:
                        $("#TestDateTo").val("");  // backspace
                        e.preventDefault();
                        break;
                    default:
                        e.preventDefault();
                        break;
                }
            });
            $("#TestDateTo").keydown(function(e) {
                switch (e.keyCode) {
                    case 8:
                        $("#TestDateTo").val("");  // backspace
                        e.preventDefault();
                        break;
                    default:
                        e.preventDefault();
                        break;
                }
            });




        })

Answer 2

这对我有用，但我的日期选择器文本框设置为只读。不希望用户能够输入日期。我创建了一个委托事件侦听器，用于处理两个日期选择器文本框的所有“关键”事件。

$(document).on('keypress keydown keyup', '#txtDtFrom, #txtDtTo', function (e){
    if (e.keyCode == 8) e.preventDefault();
});

如果您想稍微简化选择器，您还可以向所有日期选择器文本框添加一个类。