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

Question

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

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

所以我需要另一种方法，因为我说过输入的日期是在会话中传递的。

我已经添加了我的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;' />

除了你之前的样式，它还会移除你元素上的鼠标事件（包括闪烁的光标）。

无

元素永远不是鼠标事件的目标；但是，鼠标事件 如果这些后代有 指针事件设置为其他值。在这些情况下，鼠标 事件将触发此父元素上的事件侦听器 在活动期间适合他们往返后代的途中 捕获/冒泡阶段。

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