jquery ui datepicker - 只读时防止输入选择答案

【问题标题】：jquery ui datepicker - prevent enter selecting when readonlyjquery ui datepicker - 只读时防止输入选择
【发布时间】：2013-03-05 22:35:45
【问题描述】：

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 插件应用于只读字段。

有什么建议吗？

【问题讨论】：

标签： jquery jquery-ui datepicker enter

【解决方案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

此外，由于句柄执行的顺序，您可能希望在激活 datepicker 之前绑定到 keydown - 事件处理程序的执行顺序与其绑定的顺序相同 - 例如，请参见 this 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>');
        }
    }
});

【讨论】：

嗨 Shimon，感谢您的回答。正如您所建议的，'prop("readonly")==true' 可能比 'attr("readonly")=="readonly"' 更好，但这不是问题；即使我根本没有条件，我仍然无法阻止 ENTER 键使用默认日期填充文本框。 :-(
遗憾的是，这一行inst.dpDiv = $('<div style="display: none;"></div>'); 完全搞乱了日期选择器，并且在您从字段中删除只读属性后，日期选择器不再起作用（因为它的 DIV 被替换为空的）。任何想法如何解决这个问题？ inst.dpDiv.hide() 也无济于事。
如果我们在 beforeShow 中这样做，这将按预期工作：if($(input).attr("readonly")){if(inst.dpDivOrig===undefined)inst.dpDivOrig=inst.dpDiv;inst.dpDiv=$("<div style=\"display:none;\"></div>");}else{if(inst.dpDivOrig!==undefined)inst.dpDiv=inst.dpDivOrig;}

【解决方案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;
        }
    })

【讨论】：

感谢马特，但确定只读性不是问题。请参阅下面我对 Shimon 的回复，他提出了类似的建议。

【解决方案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);
        }
    }
});

【讨论】：

谢谢这里。这行得通，但是尽管您的代码更紧凑，但我接受 Shimon 的解决方案只是因为它看起来更“正确”；实际上阻止了事件而不是撤消事件的结果。

【解决方案4】：

好的，我知道这已经过时了，但是如果有其他人（比如我）出现并且正在研究如何做到这一点，那么有一个更清洁的方法，the jQuery UI docs：

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

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

【讨论】：