Readonly im IE zeigen immer noch den Cursor, während in Chrome nicht

Question

Ich habe ein Beispiel mit bootstrap datepicker wie dieser Code unter denen in der Datumswähler schreibgeschützt zeigt, die verhindern, dass der Benutzer die Datumsauswahl ändern. Wenn ich in Chrome starte und versuche, ein Datum auszuwählen, funktioniert es einwandfrei. Dann, wenn ich zum IE wechsel und nachdem ich das Datum gewählt habe, zeigt es einen Cursor im Eingabefeld an, der den Benutzer falsch verstehen kann, dass sie das Datum redigieren können, während sie tatsächlich nicht können. Wie kann ich diesen Cursor in IE

$(document).ready(function() { 
 
     // adding todays date as the value to the datepickers. 
 
     var d = new Date(); 
 
     var curr_day = d.getDate(); 
 
     var curr_month = d.getMonth() + 1; //Months are zero based 
 
     var curr_year = d.getFullYear(); 
 
     var eutoday = curr_day + "-" + curr_month + "-" + curr_year; 
 
     var ustoday = curr_month + "-" + curr_day + "-" + curr_year; 
 
     $("div.datepicker input").attr('value', eutoday); 
 
     $("div.usdatepicker input").attr('value', ustoday); 
 

 
     //calling the datepicker for bootstrap plugin 
 
     // https://github.com/eternicode/bootstrap-datepicker 
 
     // http://eternicode.github.io/bootstrap-datepicker/ 
 
     $('.datepicker').datepicker({ 
 
      autoclose: true, 
 
      startDate: new Date() 
 
     }); 
 
    });

.datepicker input { 
 
    cursor: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script> 
 
<link href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css" rel="stylesheet"/> 
 
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script> 
 
<a data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 
 

 
<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-remote="/mmfansler/aQ3Ge/show/"> 
 
    <div class="modal-header"> 
 
     Header 
 
    </div> 
 
<div class="input-append date datepicker no-padding" data-date-format="dd-mm-yyyy"> 
 
    <input class="input-medium" size="16" type="text" readonly ><span class="add-on"><i class="icon-th"></i></span> 
 
</div> 
 
    <div class="modal-footer"> 
 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
 
    <button class="btn btn-primary">Save changes</button> 
 
    </div> 
 
</div> 
 

 

 
<br><br><br> 
 

 
<div class="input-append date datepicker no-padding" data-date-format="dd-mm-yyyy" > 
 
    <input class="input-medium" size="16" type="text" readonly ><span class="add-on"><i class="icon-th"></i></span> 
 
</div>

Ihre Frage Titel

Answer 1

Fügen Sie einfach

.datepicker input { 
    pointer-events: none; 
} 

zu Ihrem CSS