gpt4 book ai didi

javascript - 使用 Tempus Dominus 的日期时间选择器防止输入字段上的移动键盘

转载 作者:行者123 更新时间:2023-11-28 02:20:38 25 4
gpt4 key购买 nike

我正在尝试通过 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>

我希望移动设备上的模态框会弹出,但每次我需要输入日期时间时,模态框和键盘都会打开。

最佳答案

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

关于javascript - 使用 Tempus Dominus 的日期时间选择器防止输入字段上的移动键盘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57884369/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com