javascript - 在不使用禁用属性的情况下使输入字段看起来已禁用

Question

我有一个 asp.net webform 和一个 datepicker 字段。当用户单击我的字段末尾的图标时，将显示日历。

我想要的是让 input 字段看起来被禁用。我尝试添加属性 disabled 和 readonly="true" 但是当我这样做时，我选择的日期没有在我的 session 中传递。

所以我需要另一种方法来执行此操作，因为我说过输入的日期是在 session 中传递的。

我已经添加了我的 background-color，但如果用户点击该字段，我需要停止显示闪烁的光标。

我尝试将 style="color: transparent !important" 添加到我的 input 字段，但这不起作用。还有别的办法吗？

我已经添加了我的 HTML 和 JQuery 来展示我的 datepicker 目前是如何工作的。

HTML

<div class="form-group">
    <asp:Label ID="Step03StartDateLabel" class="col-sm-4 control-label" runat="server" Text="Date you would like us to start *" AssociatedControlID="Step03StartDateField"></asp:Label>
    <div class="col-sm-2">
        <div class="input-group">
            <asp:TextBox ID="Step03StartDateField" runat="server" class="form-control" ToolTip="Click the calendar to select a date." style="background-color: #eeeeee; color: transparent !important;" TabIndex="-1" />
            <div class="input-group-addon">
                <span class="glyphicon glyphicon-calendar" id="Step03StartDateFieldCalendar" style="cursor: pointer"></span>
            </div>
        </div>
    </div>
    <div class="col-sm-offset-4 col-sm-8">
        <asp:RequiredFieldValidator Display="Dynamic" runat="server" ID="reqStep03startDateErrorMessage" SetFocusOnError="true" ForeColor="Red" ControlToValidate="Step03StartDateField" ErrorMessage="Please select a date you would want us to start." />
    </div>
</div>

JQuery

$(function ()
{
     $("#MainContent_Step03StartDateField").datepicker(
     {
          dateFormat: 'dd/mm/yy',
          minDate: '0',
     });

     $("#Step03StartDateFieldCalendar").click(function ()
     {
          $("#MainContent_Step03StartDateField").datepicker("show");
     });

     $("#MainContent_Step03EndDateField").datepicker(
     {
          dateFormat: 'dd/mm/yy',
          minDate: '1'
     });

     $("#Step03EndDateFieldCalendar").click(function ()
     {
          $("#MainContent_Step03EndDateField").datepicker("show");
     });
});

Answer 1

尝试将样式 pointer-events: none; ( documentation ) 添加到您的文本框:

<input type='text' style='pointer-events: none;' />

除了您以前的样式外，它还会删除您元素上的鼠标事件(包括闪烁的光标)。

None

The element is never the target of mouse events; however, mouse eventsmay target its descendant elements if those descendants havepointer-events set to some other value. In these circumstances, mouseevents will trigger event listeners on this parent element asappropriate on their way to/from the descendant during the eventcapture/bubble phases.

JSFiddle:http://jsfiddle.net/bppgcjgf/