jQuery的日期选择器与文本输入，它不允许用户输入

117

如何使用jQuery的日期选择器一个文本框输入：jQuery的日期选择器与文本输入，它不允许用户输入

$("#my_txtbox").datepicker({ 
    // options 
});

不允许用户在文本框中输入随机文本。当文本框获得焦点或用户点击它时，我希望Datepicker弹出，但我希望文本框忽略使用键盘的任何用户输入（复制&粘贴或任何其他）。我想从Datepicker日历中专门填充文本框。

这可能吗？

的jQuery 1.2.6
日期选择器1.5.2

来源

2008-09-30 Elliot Vargas

233

您应该能够使用的文本输入只读属性和jQuery将仍然能够编辑其内容。

<input type='text' id='foo' readonly='true'>

来源

2008-09-30 16:17:35

+27

对于已禁用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

要日期选择器，弹出的增益重点：

$(".selector").datepicker({ showOn: 'both' })

如果您不希望用户的输入，将其添加到输入字段

<input type="text" name="date" readonly="readonly" />

来源

2008-09-30 16:20:02

尝试

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

来源

2008-09-30 16:21:26 Brad8118

This demo sort of does t通过将日历放在文本字段上，以便您不能键入它。您也可以将输入字段设置为仅在HTML中进行读取以确保。

<input type="text" readonly="true" />

来源

2008-09-30 16:22:09 Zach

我发现jQuery日历插件，至少对我来说，一般来说只是更好的选择日期。

来源

2008-09-30 16:22:15

如果要重用在多个位置的日期选择器，然后它会倾向于使用类似修改的文本框也通过JavaScript：右后

$("#my_txtbox").attr('readOnly' , 'true');

/在那里你初始化你的日期选择器的地方之前。

来源

2009-11-17 11:16:11

<input type="text" readonly="true" />

使文本回传后失去其价值。

你应该使用Brad8118的建议，它是完美的工作。

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

编辑：得到它的IE浏览器的工作用 '的keydown' 而不是 '按键'

来源

2009-11-18 07:37:23

根据我的经验，我会建议由Adhip古普塔建议的解决方案：

$("#my_txtbox").attr('readOnly' , 'true');

下面的代码不会让用户输入新的字符，但会让允许他们删除字符：

$("#my_txtbox").keypress(function(event) {event.preventDefault();});

另外，这会使表格没用的，那些谁已禁用JavaScript：

<input type="text" readonly="true" />

来源

2011-10-02 07:27:15 2046

-1

或者你可以，例如，使用一个隐藏字段来存储值...

 <asp:HiddenField ID="hfDay" runat="server" />

。

，并在$（ “＃my_txtbox”）日期选择器（{选项：

 onSelect: function (dateText, inst) { 
      $("#<% =hfDay.ClientID %>").val(dateText); 
     }

来源

2012-10-17 21:50:47 Steinwolfe

-1

如果你希望用户选择从日期选择器b A日期UT你不希望用户键入内部文本框，然后使用下面的代码：

<script type="text/javascript"> 
$(function() { 
    $("#datepicker").datepicker({ maxDate: "-1D" }).attr('readonly', 'readonly'); 
    $("#datepicker").readonlyDatepicker(true); 

});

来源

2013-02-26 11:53:42

$('.date').each(function (e) { 
    if ($(this).attr('disabled') != 'disabled') { 
     $(this).attr('readOnly', 'true'); 
     $(this).css('cursor', 'pointer'); 
     $(this).css('color', '#5f5f5f'); 
    } 
});

来源

2013-11-19 12:51:51 LithiumD

你有两个选择来完成这件事。（据我所知）

选项A：让您的文本字段只读。它可以做到如下。
选项B：改变光标的onfocus。将ti设置为模糊。可以通过将属性onfocus="this.blur()"设置为日期选择器文本字段来完成。

例：<input type="text" name="currentDate" id="currentDate" onfocus="this.blur()" readonly/>

来源

2014-11-21 08:53:01 user2182143

HTML

<input class="date-input" type="text" readonly="readonly" />

CSS

.date-input { 
     background-color: white; 
     cursor: pointer; 
}

来源

2015-02-20 09:00:46 kayz1

这里是你的答案w ^这是解决的办法。当你限制用户在文本框控件中的输入时，你不想使用jQuery。

<input type="text" id="my_txtbox" readonly /> <!--HTML5--> 

<input type="text" id="my_txtbox" readonly="true"/>

来源

2015-07-31 04:52:29 johnkhadka

$("#txtfromdate").datepicker({   
    numberOfMonths: 2, 
    maxDate: 0,    
    dateFormat: 'dd-M-yy'  
}).attr('readonly', 'readonly');

在jQuery的添加只读属性。

来源

2015-09-18 10:15:43 Chenthil

$（“＃my_txtbox”）。托（“只读”，真）

工作就像一个魅力..

来源

2016-07-16 09:08:32 user3661687

而不是使用文本框，你可以用按钮也。最适合我的地方，我不希望用户手动编写日期。

来源

2016-11-24 05:57:25

初始化的日期选择器后：

 $(".project-date").datepicker({ 
      dateFormat: 'd M yy' 
     }); 

     $(".project-date").keydown(false);

来源

2017-01-27 11:01:15 Esen

我只是碰到这种进来，所以我在这里分享。下面是选项

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>

$('#arrival_date_div').datetimepicker({ 
    format: "YYYY-MM-DD", 
    ignoreReadonly: true 
});

这里是小提琴：

http://jsfiddle.net/matbaric/wh1cb6cy/

我的引导，datet版本imepicker.js是4.17.45

来源

2017-03-07 10:12:27 Matija

我知道这个问题已经回答了，并且大多数人建议使用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>

来源

2017-06-16 10:22:06

更换时间选择器的ID： IDofDatetimePicker到您的ID。

这将阻止用户输入任何其他键盘输入，但用户仍然可以访问时间弹出窗口。（“＃my_txtbox”）。keypress（function（event）{event.preventDefault（）;}）;}}

试试这个来源： https://github.com/jonthornton/jquery-timepicker/issues/109

来源

2017-09-20 19:41:48 Mohan

jQuery的日期选择器与文本输入，它不允许用户输入

回答

相关问题