带有文本输入的jQuery Datepicker,不允许用户输入
-
03-07-2019 - |
题
如何将jQuery Datepicker与文本框输入结合使用:
$("#my_txtbox").datepicker({
// options
});
不允许用户在文本框中输入随机文本。 我希望当文本框获得焦点或用户点击它时弹出Datepicker,但我希望文本框忽略使用键盘的任何用户输入(复制<!>放大器;粘贴或任何其他)。我想从Datepicker日历中专门填充文本框。
这可能吗?
jQuery 1.2.6
Datepicker 1.5.2
解决方案
您应该能够在文本输入上使用 readonly 属性,jQuery仍然可以编辑其内容。
<input type='text' id='foo' readonly='true'>
其他提示
根据我的经验,我会推荐Adhip Gupta建议的解决方案:
$("#my_txtbox").attr( 'readOnly' , 'true' );
以下代码不允许用户输入新字符,但将允许他们删除字符:
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
此外,这将使表单对禁用JavaScript的用户无效:
<input type="text" readonly="true" />
试
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
如果您在多个地方重复使用日期选择器,那么通过使用类似的东西也很容易通过JavaScript修改文本框:
$("#my_txtbox").attr( 'readOnly' , 'true' );
在您初始化日期选择器的地方之前/之后。
<input type="text" readonly="true" />
导致文本框在回发后丢失其值。
你宁愿使用Brad8118的建议,这是完美的。
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
编辑: 让它适用于IE使用'keydown'代替'keypress'
$("#txtfromdate").datepicker({
numberOfMonths: 2,
maxDate: 0,
dateFormat: 'dd-M-yy'
}).attr('readonly', 'readonly');
在jquery中添加readonly属性。
初始化日期选择器后:
$(".project-date").datepicker({
dateFormat: 'd M yy'
});
$(".project-date").keydown(false);
使用datepicker弹出增益焦点:
$(".selector").datepicker({ showOn: 'both' })
如果您不想要用户输入,请将其添加到输入字段
<input type="text" name="date" readonly="readonly" />
您可以通过两种方式完成此操作。 (据我所知)
-
选项A:将您的文字字段设为只读。它可以如下完成。
-
选项B:更改光标onfocus。将ti设置为模糊。可以通过将属性
onfocus="this.blur()"
设置为日期选择器文本字段来完成。
醇>
Ex:<input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>
我刚刚遇到这个,所以我在这里分享。这是选项
https://eonasdan.github.io/bootstrap-datetimepicker/Options/ #ignorereadonly
这是代码。
<强> 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>
<强> JS 强>
$('#arrival_date_div').datetimepicker({
format: "YYYY-MM-DD",
ignoreReadonly: true
});
这是小提琴:
http://jsfiddle.net/matbaric/wh1cb6cy/
我的bootstrap-datetimepicker.js版本是4.17.45
这个演示那样做是由将日历放在文本字段上,以便您无法输入。您还可以将输入字段设置为仅在HTML中读取以确保。
<input type="text" readonly="true" />
HTML
<input class="date-input" type="text" readonly="readonly" />
<强> CSS 强>
.date-input {
background-color: white;
cursor: pointer;
}
我知道这个帖子已经老了,但对于遇到同样问题的其他人来说,实现@Brad8118解决方案(我更喜欢,因为如果你选择只读输入那么用户将无法删除日期值从datepicker插入,如果他选择)并且还需要阻止用户粘贴一个值(如建议需要@ErikPhilips),我在这里添加这个,这对我有用:
$("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });
从这里 https://www.dotnettricks.com/learn/jquery/disable-cut-copy-and-paste-in-textbox-using-jquery-javascript
以及我使用的整个特定脚本(使用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;
我发现jQuery Calendar插件,对我来说,至少对我来说,选择日期效果更好。
$('.date').each(function (e) {
if ($(this).attr('disabled') != 'disabled') {
$(this).attr('readOnly', 'true');
$(this).css('cursor', 'pointer');
$(this).css('color', '#5f5f5f');
}
});
以下是您的答案。您可以在限制文本框控件中的用户输入时使用jquery。
<input type="text" id="my_txtbox" readonly /> <!--HTML5-->
<input type="text" id="my_txtbox" readonly="true"/>
$(<!> quot; #my_txtbox <!> quot;)。prop('readonly',true)
像魅力一样......
我知道这个问题已经得到解答,大多数建议使用 readonly
attribure。
我只是想分享我的情景并回答。
将 required
属性添加到 HTML元素后,我遇到了一个问题,即我无法将此属性设为 tab
动态。
甚至尝试在HTML创建时设置为 <=> 和 <=> 。
因此,如果您想将其设置为 <=> ,我建议您不要使用 <=> 。
改为使用
$("#my_txtbox").datepicker({
// options
});
$("#my_txtbox").keypress(function(event) {
return ( ( event.keyCode || event.which ) === 9 ? true : false );
});
这样只允许按 <=> 键。
您可以添加更多想要绕过的键码。
我在代码下面,因为我添加了 <=> 和 <=> 它仍然提交表单。
删除 <=> 后,它可以正常工作。
https://jsfiddle.net/shantaram/hd9o7eor/
$(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>
替换时间选择器的ID: IDofDatetimePicker到你的id。
这将阻止用户输入任何进一步的键盘输入,但用户仍然可以访问时间弹出窗口。
$(<!> quot; #my_txtbox <!> quot;)。keypress(function(event){event.preventDefault();});
试试这个 资源: https://github.com/jonthornton/jquery-timepicker/issues/109
这个问题有很多较旧的答案,而readonly似乎是普遍接受的解决方案。我相信现代浏览器中更好的方法是在HTML输入标记中使用inputmode="none"
:
<input type="text" ... inputmode="none" />
或者,如果您更喜欢在脚本中执行此操作:
$(selector).attr('inputmode', 'none');
我没有对它进行过广泛的测试,但它在我使用过的Android设置上运行良好。
或者,您可以使用隐藏字段来存储值...
<asp:HiddenField ID="hfDay" runat="server" />
和$(<!> quot; #my_txtbox <!>“;)。datepicker({options:
onSelect: function (dateText, inst) {
$("#<% =hfDay.ClientID %>").val(dateText);
}
如果您希望用户从日期选择器中选择日期,但您不希望用户在文本框内输入,请使用以下代码:
<script type="text/javascript">
$(function () {
$("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
$("#datepicker").readonlyDatepicker(true);
});