jQuery的日期选择器与文本输入,它不允许用户输入
如何使用jQuery的日期选择器一个文本框输入:jQuery的日期选择器与文本输入,它不允许用户输入
$("#my_txtbox").datepicker({
// options
});
不允许用户在文本框中输入随机文本。 当文本框获得焦点或用户点击它时,我希望Datepicker弹出,但我希望文本框忽略使用键盘的任何用户输入(复制&粘贴或任何其他)。我想从Datepicker日历中专门填充文本框。
这可能吗?
的jQuery 1.2.6
日期选择器1.5.2
您应该能够使用的文本输入只读属性和jQuery将仍然能够编辑其内容。
<input type='text' id='foo' readonly='true'>
要日期选择器,弹出的增益重点:
$(".selector").datepicker({ showOn: 'both' })
如果您不希望用户的输入,将其添加到输入字段
<input type="text" name="date" readonly="readonly" />
尝试
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
This demo sort of does t通过将日历放在文本字段上,以便您不能键入它。您也可以将输入字段设置为仅在HTML中进行读取以确保。
<input type="text" readonly="true" />
我发现jQuery日历插件,至少对我来说,一般来说只是更好的选择日期。
如果要重用在多个位置的日期选择器,然后它会倾向于使用类似修改的文本框也通过JavaScript:右后
$("#my_txtbox").attr('readOnly' , 'true');
/在那里你初始化你的日期选择器的地方之前。
<input type="text" readonly="true" />
使文本回传后失去其价值。
你应该使用Brad8118的建议,它是完美的工作。
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
编辑: 得到它的IE浏览器的工作用 '的keydown' 而不是 '按键'
根据我的经验,我会建议由Adhip古普塔建议的解决方案:
$("#my_txtbox").attr('readOnly' , 'true');
下面的代码不会让用户输入新的字符,但会让允许他们删除字符:
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
另外,这会使表格没用的,那些谁已禁用JavaScript:
<input type="text" readonly="true" />
或者你可以,例如,使用一个隐藏字段来存储值...
<asp:HiddenField ID="hfDay" runat="server" />
。
,并在$( “#my_txtbox”)日期选择器({选项:
onSelect: function (dateText, inst) {
$("#<% =hfDay.ClientID %>").val(dateText);
}
如果你希望用户选择从日期选择器b A日期UT你不希望用户键入内部文本框,然后使用下面的代码:
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly');
$("#datepicker").readonlyDatepicker(true);
});
$('.date').each(function (e) {
if ($(this).attr('disabled') != 'disabled') {
$(this).attr('readOnly', 'true');
$(this).css('cursor', 'pointer');
$(this).css('color', '#5f5f5f');
}
});
你有两个选择来完成这件事。 (据我所知)
-
选项A:让您的文本字段只读。它可以做到如下。
选项B:改变光标的onfocus。将ti设置为模糊。可以通过将属性
onfocus="this.blur()"
设置为日期选择器文本字段来完成。
例:<input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>
HTML
<input class="date-input" type="text" readonly="readonly" />
CSS
.date-input {
background-color: white;
cursor: pointer;
}
这里是你的答案w ^这是解决的办法。当你限制用户在文本框控件中的输入时,你不想使用jQuery。
<input type="text" id="my_txtbox" readonly /> <!--HTML5-->
<input type="text" id="my_txtbox" readonly="true"/>
$("#txtfromdate").datepicker({
numberOfMonths: 2,
maxDate: 0,
dateFormat: 'dd-M-yy'
}).attr('readonly', 'readonly');
在jQuery的添加只读属性。
$(“#my_txtbox”)。托(“只读”,真)
工作就像一个魅力..
初始化的日期选择器后:
$(".project-date").datepicker({
dateFormat: 'd M yy'
});
$(".project-date").keydown(false);
我只是碰到这种进来,所以我在这里分享。下面是选项
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/
我的引导,datet版本imepicker.js是4.17.45
我知道这个问题已经回答了,并且大多数人建议使用readonly
attribure。
我只是想分享我的场景和答案。
加入readonly
属性我HTML元素后,我面临的问题,我不能让这个属性作为动态required
。
甚至尝试在创建HTML时设置为readonly
和required
。
所以我会建议,如果你想将其设置为required
也不要使用readonly
。
而是使用
$("#my_txtbox").datepicker({
// options
});
$("#my_txtbox").keypress(function(event) {
return ((event.keyCode || event.which) === 9 ? true : false);
});
这允许仅按tab
关键。
您可以添加更多关键代码,您希望绕过该关键代码。
我下面的代码,因为我已经添加了两个readonly
和required
它仍然提交表单。
删除后readonly
它正常工作。
https://jsfiddle.net/shantaram/hd9o7eor/
$(function() {
$('#id-checkbox').change(function(){
\t $('#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。
这将阻止用户输入任何其他键盘输入,但用户仍然可以访问时间弹出窗口。 (“#my_txtbox”)。keypress(function(event){event.preventDefault();});}}
试试这个 来源: https://github.com/jonthornton/jquery-timepicker/issues/109
对于已禁用JavaScript我会独自留在HTML输入字段和具有的jQuery的位放置在页面加载的$(document)只读属性的人。就绪(function(){$(“#my_txtbox”)。attr'readOnly','true'); });这样,关闭JS的用户仍然可以选择日期 – SimonGates 2011-03-29 11:49:10
这很棒..但Chrome(以及其他浏览器)添加到只读属性的默认样式真的很不愉快,所以请确保您覆盖它 – Damon 2012-06-07 19:35:53
注意。使用`只读'日期选择器,最终用户**将能够通过从日期选择器中选择另一个日期来处理字段值,如在此错误中:http://bugs.jqueryui.com/ticket/13107 – Serge 2015-06-11 15:07:42