0

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

在下面的代码中，我可以通过使用“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：日期字段的“只读”在我的页面上动态打开和关闭，所以我不能不将 datepicker 插件应用于只读字段。

有什么建议么？

4

4 回答 4

2

使用prop而不是attr检查readonly。另外，检查它的真实性：

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因为句柄执行的顺序 - 事件处理程序的执行顺序与它们绑定的顺序相同 - 例如，请参见这个 SO question。
所以你可能应该这样做：

$(".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>');
        }
    }
});
于 2013-03-05T22:43:36.003 回答
0

你应该使用.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;
        }
    })
于 2013-03-05T22:37:12.807 回答
0

如果输入是只读的，您可以将值保存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);
        }
    }
});
于 2013-03-06T07:53:56.450 回答
0

好的，我知道这很旧，但是如果其他人（像我一样）出现并且正在研究如何做到这一点，那么根据 jQuery UI 文档，有一种更清洁的方法：

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

您必须在切换输入的只读属性的任何代码旁边设置 disabled 属性。在我的例子中，页面加载了已经静态设置的只读元素，所以提供的选择器只是禁用了任何指定为只读的东西。

于 2019-12-03T15:05:52.647 回答