使用 Tempus Dominus 的 datetimepicker 防止輸入字段上的移動鍵盤

Question

我正在嘗試使用Tempus Dominus 的datetimepicker，但是每當我嘗試從移動設備中選擇日期時，默認鍵盤都會打開並隱藏模態。 我想阻止它打開。

我已經嘗試了一些我在網上找到的解決方法，但我沒有讓它起作用。 我還希望有人在我應用它們之前解釋這些變通方法的工作原理以及原因（因為我不理解它們）。

我試圖只讀輸入字段，但隨后模態沒有打開。 我嘗試添加第二個按鈕並將其隱藏（不顯示），然后在只讀字段上觸發單擊事件並觸發隱藏按鈕，但這也不起作用。 我還嘗試添加一個按鍵事件來防止默認，但這只會禁用計算機上的鍵盤輸入。

事件的 Javascript 代碼：

$('#datetime').keypress(function(event) {
  event.preventDefault();
  return false;
});

HTML代碼：

<div class="input-group date" data-target-input="nearest">
  <input name="datetime" id="datetime" type="text" class="form-control datetimepicker-input" data-target="#datetime">
  <div class="input-group-append" data-target="#datetime" data-toggle="datetimepicker">
    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
  </div>
</div>

我希望手機上的模態彈出，但每次我需要輸入datetime時，模態和鍵盤都會打開。

Answer 1

使用屬性readonly可以避免使用移動鍵盤。

 $('#datetime').datetimepicker({ ignoreReadonly: true, });

 input#datetime { pointer-events: none; background-color: #fff; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" /> </head> <body> <div class="input-group date" data-target-input="nearest"> <input name="datetime" id="datetime" type="text" class="form-control datetimepicker-input" data-target="#datetime" readonly="readonly"> <div class="input-group-append" data-target="#datetime" data-toggle="datetimepicker"> <div class="input-group-text"><i class="fa fa-calendar"></i></div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script> </body>

您可以選擇忽略readonly輸入，並在單擊按鈕時打開datepicker 。

Answer 2

如果您使用的是 Tempus Dominus，則可以將選項 focusOnShow 設置為 false。 來源

$('#datetimepicker1').datetimepicker({
  focusOnShow: false,
});

使用 Tempus Dominus 的 datetimepicker 防止輸入字段上的移動鍵盤

問題描述

2 個解決方案

解決方案1
0 已采納 2019-09-11 07:43:30

解決方案2
0 2021-11-03 08:57:23

使用 Tempus Dominus 的 datetimepicker 防止輸入字段上的移動鍵盤

問題描述

2 個解決方案

解決方案1 0 已采納 2019-09-11 07:43:30

解決方案2 0 2021-11-03 08:57:23

解決方案1
0 已采納 2019-09-11 07:43:30

解決方案2
0 2021-11-03 08:57:23