如何禁用 JQuery UI Datepicker 字段的手动输入？ [复制]答案

【问题标题】：How to disable manual input for JQuery UI Datepicker field? [duplicate]如何禁用 JQuery UI Datepicker 字段的手动输入？ [复制]
【发布时间】：2011-05-09 01:12:52
【问题描述】：

我决定使用 JQuery UI Datepicker 脚本来选择日期。以下是我的代码的一部分，以及我将其集成到我的 PHP 页面中的方式：

<link type="text/css" href="css/south-street/jquery-ui-1.8.6.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript">
$(function(){
    // Datepicker
    $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
    //hover states on the static widgets
    $('#dialog_link, ul#icons li').hover(
        function() { $(this).addClass('ui-state-hover'); }, 
        function() { $(this).removeClass('ui-state-hover'); }
    );
});
</script>

还有：

    // date picker (embeds JQuery script)
echo '<label for="datepicker">Date: </label>';
echo '<input type="text" name="datepicker" id="datepicker" />';
echo '<div id="datepicker"></div>';

几乎按照 JQuery UI 说明进行。

现在我的问题是：如何禁用文本输入字段中的手动输入？我只希望 JQuery Datepicker 脚本能够填充文本字段。据我所知，该脚本目前阻止用户在文本字段中输入任何非数字字符，但允许任何数字组合（因此，允许使用诸如“95460829468”之类的乱码）。

【问题讨论】：

标签： php jquery-ui datepicker

【解决方案1】：

进行输入时，将其设置为只读。

<input type="text" name="datepicker" id="datepicker" readonly="readonly" />

【讨论】：

非常简单的解决方案。似乎按预期工作，非常感谢！
如果添加 'background-color: #fff !important;光标：文本！重要；'它看起来完全正常......
我会使用光标指针让它看起来可点击<input ... readonly="readonly" style="cursor:pointer; background-color: #FFFFFF">
这也适用于带有 new { @readonly="readonly" } 的 MVC 页面
此解决方案不允许我清除所选日期。

【解决方案2】：

我认为你应该添加 style="background:white;" 让它看起来是可写的

<input type="text" size="23" name="dateMonthly" id="dateMonthly" readonly="readonly"   style="background:white;"/>

【讨论】：

1.复制答案 2. 添加新属性（我认为您应该添加 style="background:white;" 使其看起来可写，并添加 "cursor: pointer" 使其看起来可点击） 3. ??????? 4. 利润
公平地说，CSS 提示实际上非常有用，因此输入不会显示为禁用。