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的日期選擇器與文本輸入，它不允許用戶輸入

回答

相關問題