使用 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