如何在文本框输入中使用jQuery Datepicker:
$("#my_txtbox").datepicker({
// options
});
不允许用户在文本框中输入随机文本。我希望当文本框获得焦点或用户单击它时弹出Datepicker,但是我希望文本框忽略使用键盘的任何用户输入(复制和粘贴或任何其他操作)。我想专门从Datepicker日历中填充文本框。
这可能吗?
jQuery 1.2.6
日期选择器1.5.2
如何在文本框输入中使用jQuery Datepicker:
$("#my_txtbox").datepicker({
// options
});
不允许用户在文本框中输入随机文本。我希望当文本框获得焦点或用户单击它时弹出Datepicker,但是我希望文本框忽略使用键盘的任何用户输入(复制和粘贴或任何其他操作)。我想专门从Datepicker日历中填充文本框。
这可能吗?
jQuery 1.2.6
日期选择器1.5.2
Answers:
您应该能够在文本输入中使用readonly属性,并且jQuery仍将能够编辑其内容。
<input type='text' id='foo' readonly='true'>
$("#my_txtbox").prop('readonly', true)
<input ... readonly="readonly" style="cursor:pointer; background-color: #FFFFFF">
根据我的经验,我会推荐Adhip Gupta建议的解决方案:
$("#my_txtbox").attr( 'readOnly' , 'true' );
下面的代码不会让用户类型的新角色,但将让他们删除字符:
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
此外,这将使禁用JavaScript的人无法使用该表单:
<input type="text" readonly="true" />
readonly
通过JS 将属性添加到字段中,可以确保如果他们禁用了JavaScript(因此将无法使用日期选择器),他们仍然可以通过标准的手动输入使用表单。
$("#my_txtbox").prop('readonly', true)
;
尝试
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
<input type="text" readonly="true" />
导致文本框在回发后丢失其值。
您应该使用Brad8118的建议,该建议效果很好。
$("#my_txtbox").keypress(function(event) {event.preventDefault();});
编辑:要使其适用于IE,请使用“ keydown”而不是“ keypress”
您有两种选择可以完成此操作。(我所知道的)
选项A:将您的文本字段设为只读。可以如下进行。
选项B:更改光标聚焦。将ti设置为模糊。可以通过将属性设置 onfocus="this.blur()"
为日期选择器文本字段来完成。
例如: <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
我知道这个线程很旧,但是对于其他遇到相同问题的线程,可以实现@ Brad8118解决方案(我更喜欢,因为如果您选择将输入设为只读,那么用户将无法删除从datepicker插入的日期值(如果他选择),并且还需要防止用户粘贴值(如@ErikPhilips所建议的那样),我在这里放了这个对我有用的方法:
$("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });
从这里https://www.dotnettricks.com/learn/ jquery / disable-cut-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;
除了添加只读之外,您还可以使用onkeypress =“ return false;”。
$(“#my_txtbox”)。prop('readonly',true)
像魅力一样工作..
我知道这个问题已经回答了,大多数建议使用readonly
属性。
我只想分享我的情况和答案。
在将readonly
属性添加到HTML元素后,我遇到的问题是我无法动态地设置此属性required
。
甚至尝试同时设置为HTML readonly
和required
HTML创建时。
因此,我建议readonly
您不要将其设置为required
。
改为使用
$("#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(){
$('#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
或者,例如,您可以使用隐藏字段来存储值...
<asp:HiddenField ID="hfDay" runat="server" />
并在$(“#my_txtbox”)。datepicker({选项中:
onSelect: function (dateText, inst) {
$("#<% =hfDay.ClientID %>").val(dateText);
}