带有日期输入的jQuery Datepicker,不允许用户输入

jquery datepicker

232274 观看

24回复

9616 作者的声誉

如何在文本框输入中使用jQuery Datepicker:

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

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

这可能吗?

jQuery 1.2.6
日期选择器1.5.2

作者: Elliot Vargas 的来源 发布者: 2008 年 9 月 30 日

回应 (24)


267

86571 作者的声誉

决定

您应该能够在文本输入中使用readonly属性,并且jQuery仍将能够编辑其内容。

<input type='text' id='foo' readonly='true'>
作者: Adam Bellaire 发布者: 30.09.2008 04:17

3

32532 作者的声誉

要选择日期弹出以获取焦点:

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

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

<input type="text" name="date" readonly="readonly" />
作者: Eduardo Molteni 发布者: 30.09.2008 04:20

13

2409 作者的声誉

尝试

$("#my_txtbox").keypress(function(event) {event.preventDefault();});
作者: Brad8118 发布者: 30.09.2008 04:21

1

19258 作者的声誉

这种演示方式是通过将日历放在文本字段上来完成的,因此您无法键入它。当然,您也可以将输入字段设置为仅读取HTML。

<input type="text" readonly="true" />
作者: Zach 发布者: 30.09.2008 04:22

0

88396 作者的声誉

我发现至少对我而言,jQuery Calendar插件通常在选择日期时效果更好。

作者: James Curran 发布者: 30.09.2008 04:22

10

4533 作者的声誉

如果要在多个地方重用日期选择器,那么也很容易通过JavaScript使用类似以下方法来修改文本框:

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

在您初始化日期选择器之后/之前。

作者: Adhip Gupta 发布者: 17.11.2009 11:16

6

0 作者的声誉

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

导致文本框在回发后丢失其值。

您宁可使用Brad8118的建议,也可以正常使用。

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

编辑:要使其适用于IE,请使用“ keydown”而不是“ keypress”

作者: user213545 发布者: 18.11.2009 07:37

59

591 作者的声誉

根据我的经验,我会推荐Adhip Gupta建议的解决方案:

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

下面的代码不会让用户类型的新角色,但允许他们删除字符:

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

此外,这将使禁用JavaScript的用户无法使用该表单:

<input type="text" readonly="true" />
作者: 2046 发布者: 02.10.2011 07:27

-1

71 作者的声誉

或者,例如,您可以使用隐藏字段来存储值...

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

并在$(“#my_txtbox”)。datepicker({选项中:

        onSelect: function (dateText, inst) {
            $("#<% =hfDay.ClientID %>").val(dateText);
        }
作者: Steinwolfe 发布者: 17.10.2012 09:50

-1

1 作者的声誉

如果您希望用户从日期选择器中选择一个日期,但又不想用户在文本框中输入内容,请使用以下代码:

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

});

作者: Shabbir.A.Hussain 发布者: 26.02.2013 11:53

0

16 作者的声誉

$('.date').each(function (e) {
    if ($(this).attr('disabled') != 'disabled') {
        $(this).attr('readOnly', 'true');
        $(this).css('cursor', 'pointer');
        $(this).css('color', '#5f5f5f');
    }
});
作者: LithiumD 发布者: 19.11.2013 12:51

3

602 作者的声誉

您有两种选择可以完成此操作。(我所知道的)

  1. 选项A:将您的文本字段设为只读。可以如下进行。

  2. 选项B:更改光标聚焦。将ti设置为模糊。可以通过将属性设置 onfocus="this.blur()"为日期选择器文本字段来完成。

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

作者: user2182143 发布者: 21.11.2014 08:53

1

5981 作者的声誉

的HTML

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

的CSS

.date-input {
      background-color: white;
      cursor: pointer;
}
作者: kayz1 发布者: 20.02.2015 09:00

0

16 作者的声誉

这是解决问题的答案。当您限制文本框控件中的用户输入时,您不想使用jquery。

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

<input type="text" id="my_txtbox" readonly="true"/>
作者: johnkhadka 发布者: 31.07.2015 04:52

4

164 作者的声誉

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

在jquery中添加readonly属性。

作者: Chenthil 发布者: 18.09.2015 10:15

0

1 作者的声誉

$(“#my_txtbox”)。prop('readonly',true)

像魅力一样工作..

作者: Prakash Singh 发布者: 16.07.2016 09:08

0

38 作者的声誉

除了使用文本框,您还可以使用按钮。最适合我,我不希望用户手动输入日期。

在此处输入图片说明

作者: Ajjay Arora 发布者: 24.11.2016 05:57

4

1328 作者的声誉

初始化日期选择器后:

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

        $(".project-date").keydown(false);
作者: umutesen 发布者: 27.01.2017 11:01

3

14262 作者的声誉

我刚遇到这个,所以我在这里分享。这是选项

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

作者: Matija 发布者: 07.03.2017 10:12

0

1220 作者的声誉

我知道这个问题已经回答了,大多数建议使用readonly属性。
我只想分享我的情况和答案。

在将readonly属性添加到HTML元素后,我遇到的问题是我无法动态地设置属性required
甚至尝试同时设置为HTML readonlyrequiredHTML创建时。

因此,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>

作者: Shantaram Tupe 发布者: 16.06.2017 10:22

0

18 作者的声誉

将时间选择器的ID:IDofDatetimePicker替换为您的ID。

这将阻止用户输入任何其他键盘输入,但仍然可以使用户访问时间弹出窗口。

$(“#my_txtbox”)。keypress(function(event){event.preventDefault();});

尝试以下来源:https : //github.com/jonthornton/jquery-timepicker/issues/109

作者: Mohan 发布者: 20.09.2017 07:41

1

86 作者的声誉

我知道这个线程很旧,但是对于其他遇到相同问题的线程,可以实现@ 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;
作者: Mariana Marica 发布者: 11.03.2019 04:10

0

2885 作者的声誉

这个问题有很多旧的答案,并且只读似乎是公认的解决方案。我相信现代浏览器中更好的方法是inputmode="none"在HTML输入标签中使用:

<input type="text" ... inputmode="none" />

或者,如果您更喜欢在脚本中执行此操作:

$(selector).attr('inputmode', 'none');

我尚未对其进行广泛的测试,但它在我使用过的Android设置上运行良好。

作者: Peter Bowers 发布者: 03.04.2019 09:51

0

47 作者的声誉

除了添加只读,还可以使用onkeypress =“ return false;”。

作者: Krishnan 发布者: 05.08.2019 07:44
32x32