Question

Jquery UI datepicker似乎忽略了输入字段的“readonly”属性。

在下面的代码中，我可以通过使用“beforeShow”事件来禁用弹出日历（感谢StackOverflow上的另一个答案 - 这里为了其他人的利益而复制）

但是，我无法阻止Enter键使用当前日期填充文本框。我试图拦截“keydown”事件（下面），但没有快乐。： - （

<input type="text" class=".input-date" readonly="readonly" />

$(".input-date").datepicker({
    beforeShow: function (input, inst) {
        if ($(input).attr("readonly")) {
            inst.dpDiv = $('<div style="display: none;"></div>');
        }
    }
})
.bind("keydown", function (e) {
    if (e.keyCode == 13 && $(this).attr("readonly") == "readonly") {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }

})

另外FWIW：日期字段的“只读”已打开＆amp;在我的页面上动态关闭，所以我不能不将datepicker插件应用于只读字段。

有什么建议吗？

Answer 1

使用prop代替attr来检查只读。另外，检查一下真相：

if ($(this).prop("readonly")){
    // do stuff
}

更新

使用e.which检测按下了哪个键另外，使用event.stopImmediatePropagation()来停止默认操作：

if (e.which == 13 && $(this).prop("readonly")) {
    e.preventDefault();
    e.stopImmediatePropagation();
    return false;
}

更新2

此外，由于句柄执行的顺序，您可能希望在激活keydown之前绑定到datepicker - 事件处理程序的执行顺序与它们绑定的顺序相同 - 请参阅{{3}例如。
所以你应该这样做：

$(".input-date").bind("keydown", function (e) {
    if (e.which == 13 && $(this).prop("readonly")) {
        e.preventDefault();
        e.stopImmediatePropagation();
        return false;
    }
}).datepicker({
    beforeShow: function (input, inst) {
        if ($(input).prop("readonly")) {
           inst.dpDiv = $('<div style="display: none;"></div>');
        }
    }
});

Answer 2

您应该使用.prop()

 <input type="text" class=".input-date" readonly="readonly" />

    $(".input-date").datepicker({
        beforeShow: function (input, inst) {
            if ($(input).prop("readonly")) {
                inst.dpDiv = $('<div style="display: none;"></div>');
            }
        }
    })
    .bind("keydown", function (e) {
        if (e.keyCode == 13 && $(this).prop("readonly") == "readonly") {
            e.preventDefault();
            e.stopPropagation();
            return false;
        }
    })

Answer 3

如果输入是只读的，您可以将值beforeShow保存在var中并将其设置回输入onSelect：

var onShowValue;

$(".input-date").datepicker({
    beforeShow: function (input, inst) {
        if ($(input).prop("readonly")) {
            inst.dpDiv = $('<div style="display: none;"></div>');
        }
        onShowValue = $(input).val();
    },
    onSelect: function (date) {
        if ($(this).prop("readonly")) {
            $(this).val(onShowValue);
        }
    }
});

Answer 4

好吧，我知道这已经很老了，但是如果the jQuery UI docs中有其他人（像我一样）出现并正在研究如何做到这一点，则有一种更简洁的方法：

$("input[readonly='']").datepicker( "option", "disabled", true );

无论什么代码切换输入的readonly属性，您都必须设置disabled属性。就我而言，该页面正在加载已静态设置的readonly元素，因此提供的选择器只是禁用了任何指定为readonly的内容。

jquery ui datepicker - 阻止在readonly时进入选择

4 个答案:

更新

更新2