jQuery Datepicker với kiểu nhập văn bản không cho phép người dùng nhập

Làm cách nào để sử dụng jQuery Datepicker với đầu vào hộp văn bản:

$("#my_txtbox").datepicker({
  // options
});

không cho phép người dùng nhập văn bản ngẫu nhiên vào hộp văn bản. Tôi muốn Datepicker bật lên khi hộp văn bản lấy nét hoặc người dùng nhấp vào nó, nhưng tôi muốn hộp văn bản bỏ qua mọi mục nhập của người dùng bằng bàn phím (sao chép và dán hoặc bất kỳ thứ gì khác). Tôi muốn điền vào hộp văn bản độc quyền từ lịch Datepicker.

Điều này có thể không?

jQuery 1.2.6
Datepicker 1.5.2

Bạn sẽ có thể sử dụng thuộc tính chỉ đọc trên đầu vào văn bản và jQuery vẫn có thể chỉnh sửa nội dung của nó.

<input type='text' id='foo' readonly='true'>

Dựa trên kinh nghiệm của tôi, tôi muốn giới thiệu giải pháp được đề xuất bởi Adhip Gupta:

$("#my_txtbox").attr( 'readOnly' , 'true' );

Đoạn mã sau sẽ không cho phép người dùng nhập các ký tự mới, nhưng sẽ cho phép họ xóa các ký tự:

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

Ngoài ra, điều này sẽ khiến biểu mẫu trở nên vô dụng đối với những người đã tắt JavaScript:

<input type="text" readonly="true" />

thử

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

Nếu bạn đang sử dụng lại công cụ chọn ngày ở nhiều nơi thì có thể sửa đổi hộp văn bản cũng thông qua JavaScript bằng cách sử dụng một cái gì đó như:

$("#my_txtbox").attr( 'readOnly' , 'true' );

ngay sau / trước nơi bạn khởi tạo datepicker của bạn.

<input type="text" readonly="true" />

làm cho hộp văn bản mất giá trị sau khi gửi lại.

Bạn nên sử dụng đề xuất của Brad8118 đang hoạt động hoàn hảo.

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

EDIT: để làm cho nó hoạt động cho IE, hãy sử dụng 'keydown' thay vì 'keypress'

$("#txtfromdate").datepicker({         
    numberOfMonths: 2,
    maxDate: 0,               
    dateFormat: 'dd-M-yy'       
}).attr('readonly', 'readonly');

thêm thuộc tính readonly trong jquery.

Bạn có hai lựa chọn để thực hiện điều này. (Theo như tôi biết)

1. Tùy chọn A: Làm cho trường văn bản của bạn chỉ đọc. Nó có thể được thực hiện như sau.

2. Tùy chọn B: Thay đổi tiêu điểm con trỏ. Đặt ti thành mờ. nó có thể được thực hiện bằng cách thiết lập thuộc tính onfocus="this.blur()"cho trường văn bản bộ chọn ngày của bạn.

Ví dụ: <input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>

Sau khi khởi tạo bộ chọn ngày:

        $(".project-date").datepicker({
            dateFormat: 'd M yy'
        });

        $(".project-date").keydown(false);

Để hẹn hò để bật lên trên tập trung đạt được:

$(".selector").datepicker({ showOn: 'both' })

Nếu bạn không muốn người dùng nhập, hãy thêm phần này vào trường nhập

<input type="text" name="date" readonly="readonly" />

Tôi chỉ đi qua điều này vì vậy tôi đang chia sẻ ở đây. Đây là tùy chọn

https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly

Đây là mã.

HTML

<br/>
<!-- padding for jsfiddle -->
<div class="input-group date" id="arrival_date_div">
  <input type="text" class="form-control" id="arrival_date" name="arrival_date" required readonly="readonly" />
  <span class="input-group-addon">
    <span class="glyphicon-calendar glyphicon"></span>
  </span>
</div>

Mã não

$('#arrival_date_div').datetimepicker({
  format: "YYYY-MM-DD",
  ignoreReadonly: true
});

Đây là câu đố:

http://jsfiddle.net/matbaric/wh1cb6cy/

Phiên bản bootstrap-datetimepicker.js của tôi là 4.17,45

Bản demo này thực hiện điều đó bằng cách đặt lịch trên trường văn bản để bạn không thể nhập vào đó. Bạn cũng có thể đặt trường đầu vào chỉ đọc trong HTML để đảm bảo.

<input type="text" readonly="true" />

HTML

<input class="date-input" type="text" readonly="readonly" />

CSS

.date-input {
      background-color: white;
      cursor: pointer;
}

Tôi biết chủ đề này đã cũ, nhưng đối với những người khác gặp phải vấn đề tương tự, đó là giải pháp @ Brad8118 (mà tôi thích, bởi vì nếu bạn chọn làm cho đầu vào chỉ đọc thì người dùng sẽ không thể xóa giá trị ngày được chèn từ datepicker nếu anh ta chọn) và cũng cần ngăn người dùng dán một giá trị (như @ErikPhilips đề xuất là cần thiết), tôi để phần bổ sung này ở đây, hoạt động cho tôi: $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });từ đây https://www.dotnettricks.com/learn/ jquery / vô hiệu hóa-cắt-sao chép và dán-trong-hộp văn bản-sử dụng-jquery-javascript và toàn bộ tập lệnh cụ thể được tôi sử dụng (thay vào đó sử dụng plugin fengyuanchen / datepicker):

$('[data-toggle="datepicker"]').datepicker({
    autoHide: true,
    pick: function (e) {
        e.preventDefault();
        $(this).val($(this).datepicker('getDate', true));
    }
}).keypress(function(event) {
    event.preventDefault(); // prevent keyboard writing but allowing value deletion
}).bind('paste',function(e) {
    e.preventDefault()
}); //disable paste;

Thay vì thêm chỉ đọc, bạn cũng có thể sử dụng onkeypress = "return false;"

Tôi đã thấy rằng plugin jQuery Lịch, đối với tôi ít nhất, nói chung chỉ hoạt động tốt hơn để chọn ngày.

$('.date').each(function (e) {
    if ($(this).attr('disabled') != 'disabled') {
        $(this).attr('readOnly', 'true');
        $(this).css('cursor', 'pointer');
        $(this).css('color', '#5f5f5f');
    }
});

Đây là câu trả lời của bạn, đó là cách giải quyết. Bạn không muốn sử dụng jquery khi bạn giới hạn đầu vào của người dùng trong điều khiển hộp văn bản.

<input type="text" id="my_txtbox" readonly />  <!--HTML5-->

<input type="text" id="my_txtbox" readonly="true"/>

$ ("# my_txtbox"). prop ('chỉ đọc', đúng)

làm việc như người ở..

Thay vì sử dụng hộp văn bản, bạn cũng có thể sử dụng nút. Hoạt động tốt nhất với tôi, nơi tôi không muốn người dùng viết ngày theo cách thủ công.

Tôi biết câu hỏi này đã được trả lời, và hầu hết đề nghị sử dụng readonlyattribure.
Tôi chỉ muốn chia sẻ kịch bản của tôi và trả lời.

Sau khi thêm readonlythuộc tính vào Phần tử HTML của tôi , tôi gặp phải vấn đề là tôi không thể biến thuộc tính này thành requiredđộng.
Thậm chí đã thử cài đặt cả hai readonlyvà requiredtại thời điểm tạo HTML.

Vì vậy, tôi sẽ đề nghị không sử dụng readonlynếu bạn muốn đặt nó là tốt required.

Thay vào đó hãy sử dụng

$("#my_txtbox").datepicker({
    // options
});

$("#my_txtbox").keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});

Điều này cho phép chỉ nhấn tabphím.
Bạn có thể thêm nhiều mã khóa mà bạn muốn bỏ qua.

Tôi bên dưới mã vì tôi đã thêm cả hai readonlyvà requirednó vẫn gửi biểu mẫu.
Sau khi loại bỏ readonlynó hoạt động đúng.

https://jsfiddle.net/shantaram/hd9o7seng/

$(function() {
  $('#id-checkbox').change( function(){
  	$('#id-input3').prop('required', $(this).is(':checked'));
  });
  $('#id-input3').datepicker();
  $("#id-input3").keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link href="https://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet"/>

<form action='https://jsfiddle.net/'>
Name:  <input type="text" name='xyz' id='id-input3' readonly='true' required='true'> 
    <input type='checkbox' id='id-checkbox'> Required <br>
    <br>
    <input type='submit' value='Submit'>
</form>

thay thế ID của bộ chọn thời gian: IDofDatetimePicker vào id của bạn.

Điều này sẽ ngăn người dùng nhập thêm bất kỳ đầu vào bàn phím nào nhưng vẫn có thể, người dùng sẽ có thể truy cập cửa sổ bật lên thời gian.

$ ("# my_txtbox"). keypress (hàm (sự kiện) {event.preventDefault ();});

Hãy thử nguồn này: https://github.com/jonthornton/jquery-timepicker/issues/109

Câu hỏi này có rất nhiều câu trả lời cũ hơn và dường như chỉ là giải pháp được chấp nhận rộng rãi. Tôi tin rằng cách tiếp cận tốt hơn trong các trình duyệt hiện đại là sử dụng inputmode="none"thẻ đầu vào HTML:

<input type="text" ... inputmode="none" />

hoặc, nếu bạn thích làm điều đó trong kịch bản:

$(selector).attr('inputmode', 'none');

Tôi chưa thử nghiệm rộng rãi, nhưng nó hoạt động tốt trên các thiết lập Android mà tôi đã sử dụng.

Hoặc bạn có thể, ví dụ, sử dụng một trường ẩn để lưu trữ giá trị ...

        <asp:HiddenField ID="hfDay" runat="server" />

và trong $ ("# my_txtbox"). datepicker ({tùy chọn:

        onSelect: function (dateText, inst) {
            $("#<% =hfDay.ClientID %>").val(dateText);
        }

Nếu bạn muốn người dùng chọn một ngày từ công cụ hẹn hò nhưng bạn không muốn người dùng nhập vào trong hộp văn bản thì hãy sử dụng mã sau đây:

<script type="text/javascript">
$(function () {
    $("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
    $("#datepicker").readonlyDatepicker(true);

});