jQuery Datepicker z wprowadzaniem tekstu, które nie pozwala na wprowadzanie danych przez użytkownika

140

Jak używać jQuery Datepicker z danymi wejściowymi w polu tekstowym:

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

która nie pozwala użytkownikowi na wprowadzenie losowego tekstu w polu tekstowym. Chcę, aby Datepicker pojawiał się, gdy pole tekstowe zyskuje fokus lub użytkownik je kliknie, ale chcę, aby pole tekstowe ignorowało wszelkie dane wejściowe użytkownika za pomocą klawiatury (kopiuj i wklej lub inne). Chcę wypełnić pole tekstowe wyłącznie z kalendarza Datepicker.

czy to możliwe?

jQuery 1.2.6
Datepicker 1.5.2

Elliot Vargas
źródło

Odpowiedzi:

269

Powinieneś móc używać tylko do odczytu atrybutu przy wprowadzaniu tekstu, a jQuery nadal będzie mógł edytować jego zawartość.

<input type='text' id='foo' readonly='true'>
Adam Bellaire
źródło
30
Dla osób, które mają wyłączoną obsługę Javascript, zostawiłbym pole wejściowe w kodzie HTML i kazałbym bitowi jQuery umieścić atrybut tylko do odczytu na stronie load $ (document) .ready (function () {$ ("# my_txtbox"). Attr „readOnly”, „true”); }); W ten sposób użytkownicy z wyłączonym JS mogą nadal wybrać datę
SimonGates
6
to jest świetne .. jednak domyślny styl, który Chrome (i prawdopodobnie inne przeglądarki) dodaje do atrybutów tylko do odczytu, jest naprawdę nieprzyjemny, więc upewnij się, że go zastąpiłeś
Damon,
1
@FooBar Zaproponowałeś praktyczne rozwiązanie; tylko uwaga, że ​​obecnie preferowanym sposobem (ponieważ minęło trochę czasu od twojego komentarza) ustawiania atrybutu tylko do odczytu jest metoda prop ():$("#my_txtbox").prop('readonly', true)
Werner,
2
Zgodnie ze specyfikacją HTML WC3, jego jedyne <input readonly> lub <input readonly = "readonly"> bez true / false w3.org/TR/html5/forms.html#the-readonly-attribute
Ankit Sharma
5
<input ... readonly="readonly" style="cursor:pointer; background-color: #FFFFFF">
Użyłbym
61

Bazując na swoim doświadczeniu polecam rozwiązanie zaproponowane przez Adhip Gupta:

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

Poniższy kod nie pozwoli typu użytkownik nowe postacie, ale będą dopuszczać ich do znaków Usuń:

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

Dodatkowo spowoduje to, że formularz będzie bezużyteczny dla tych, którzy mają wyłączoną obsługę JavaScript:

<input type="text" readonly="true" />
2046
źródło
3
OP powinien rozważyć oznaczenie tego jako odpowiedzi ze względu na scenariusz wyłączenia JavaScript.
CeejeeB
7
w jakim wszechświecie równoległym ludzie używają zwykłych stron internetowych z wyłączonym javascriptem?
d.raev
W jaki sposób ta odpowiedź JAVASCRIPT pomogłaby, gdyby i tak JavaScript był wyłączony?
PW Kad
1
@PWKad dodając readonlyatrybut do pola za pośrednictwem JS, zapewniasz, że jeśli mają wyłączony JavaScript (a zatem nie będą mogli korzystać z datepickera), nadal będą mogli używać formularza poprzez standardowe ręczne wprowadzanie.
Jonathan Bender
2
W chwili pisania tego tekstu, jest to preferowany sposób ustawić atrybut tylko do odczytu przy użyciu jQuery: $("#my_txtbox").prop('readonly', true);
Werner,
13

próbować

$("#my_txtbox").keypress(function(event) {event.preventDefault();});
Brad8118
źródło
Użyłem tego z sukcesem w asp.net, ponieważ nie grał dobrze podczas ustawiania atrybutu <asp: textbox> readonly na „true”
Russ Cam,
2
Nie uniemożliwia to komuś wklejenia wartości do pola tekstowego do wykorzystania w przyszłości.
Erik Philips
10

Jeśli ponownie używasz selektora dat w wielu miejscach, dobrze byłoby zmodyfikować pole tekstowe również za pomocą JavaScript, używając czegoś takiego:

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

zaraz po / przed miejscem, w którym zainicjowałeś swój datepicker.

Adhip Gupta
źródło
6
<input type="text" readonly="true" />

powoduje, że pole tekstowe traci swoją wartość po ogłoszeniu zwrotnym.

Powinieneś raczej skorzystać z sugestii Brad8118, która działa idealnie.

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

EDYCJA: aby działał w IE, użyj „keydown” zamiast „keypress”


źródło
4
$("#txtfromdate").datepicker({         
    numberOfMonths: 2,
    maxDate: 0,               
    dateFormat: 'dd-M-yy'       
}).attr('readonly', 'readonly');

dodaj atrybut readonly do jquery.

Chenthil
źródło
4

Masz dwie możliwości, aby to zrobić. (Z tego co wiem)

  1. Opcja A: Ustaw pole tekstowe tylko do odczytu. Można to zrobić w następujący sposób.

  2. Opcja B: Zmień onfocus kursora. Ustaw ti na rozmycie. można to zrobić, ustawiając atrybut onfocus="this.blur()"w polu tekstowym selektora dat.

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

user2182143
źródło
2
rozmycie było niesamowite. Pole nie musiało być tylko do odczytu, co dezorientuje niektórych użytkowników, gdy otrzymają gigantyczny czerwony STOP na polu w Chrome ... zapobiega wycinaniu i wklejaniu, usuwaniu, wpisywaniu itp ... a jquery datepicker nadal działa dobrze ...
David C
4

Po zainicjowaniu selektora dat:

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

        $(".project-date").keydown(false);
umutesen
źródło
Albo jednym krokiem$(".project-date").datepicker().keydown(false);
Christian Lescuyer
3

Aby wybrać datę wyskakującego okienka na temat wzmocnienia:

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

Jeśli nie chcesz, aby użytkownik wprowadzał dane, dodaj to do pola wejściowego

<input type="text" name="date" readonly="readonly" />
Eduardo Molteni
źródło
3

Właśnie natknąłem się na to, więc udostępniam tutaj. Oto opcja

https://eonasdan.github.io/bootstrap-datetimepicker/Options/#ignorereadonly

Oto kod.

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
});

Oto skrzypce:

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

Moja wersja pliku bootstrap-datetimepicker.js to 4.17.45

Matija
źródło
1

To demo robi to poprzez umieszczenie kalendarza nad polem tekstowym, więc nie można go wpisać. Możesz także ustawić pole wejściowe tak, aby było tylko do odczytu w HTML, aby mieć pewność.

<input type="text" readonly="true" />
Zach
źródło
1

HTML

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

CSS

.date-input {
      background-color: white;
      cursor: pointer;
}
kayz1
źródło
1

Wiem, że ten wątek jest stary, ale dla innych, którzy napotykają ten sam problem, wdrażają rozwiązanie @ Brad8118 (co wolę, ponieważ jeśli wybierzesz, aby dane wejściowe były tylko do odczytu, użytkownik nie będzie mógł usunąć wartości daty wstawionej z datepicker jeśli wybierze), a także muszę uniemożliwić użytkownikowi wklejenie wartości (jak sugerował @ErikPhilips, że jest potrzebna), tutaj dodałem ten dodatek, który działał dla mnie: $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });stąd https://www.dotnettricks.com/learn/ jquery / disable-cut-copy-and-paste-in-textbox-using-jquery-javascript oraz cały specyficzny skrypt używany przeze mnie (używając zamiast tego wtyczki 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
źródło
0

Odkryłem, że wtyczka jQuery Calendar, przynajmniej dla mnie, ogólnie działa lepiej do wybierania dat.

James Curran
źródło
0
$('.date').each(function (e) {
    if ($(this).attr('disabled') != 'disabled') {
        $(this).attr('readOnly', 'true');
        $(this).css('cursor', 'pointer');
        $(this).css('color', '#5f5f5f');
    }
});
Litowe D.
źródło
0

Oto twoja odpowiedź, która jest sposobem na rozwiązanie: Nie chcesz używać jquery, gdy ograniczyłeś wprowadzanie danych przez użytkownika w kontrolce TextBox.

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

<input type="text" id="my_txtbox" readonly="true"/>
johnkhadka
źródło
0

$ ("# my_txtbox"). prop ('tylko do odczytu', prawda)

działał jak urok.

Prakash Singh
źródło
0

Zamiast używać pola tekstowego możesz również użyć przycisku. U mnie działa najlepiej, gdy nie chcę, aby użytkownicy ręcznie wpisywali datę.

wprowadź opis obrazu tutaj

Ajjay Arora
źródło
0

Wiem, że na to pytanie udzielono już odpowiedzi i większość sugeruje użycie readonlyatrybutu.
Chcę tylko podzielić się moim scenariuszem i odpowiedzieć.

Po dodaniu readonlyatrybutu do mojego elementu HTML napotkałem problem polegający na tym, że nie mogę utworzyć tego atrybutu tak requireddynamicznie.
Próbowałem nawet ustawić jako oba readonlyirequired podczas tworzenia HTML.

Więc zasugeruję, aby nie używać, readonlyjeśli chcesz ustawić to requiredrównież.

Zamiast tego użyj

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

$("#my_txtbox").keypress(function(event) {
    return ( ( event.keyCode || event.which ) === 9 ? true : false );
});

Pozwala to tabtylko na naciśnięcie klawisza.
Możesz dodać więcej kodów klawiszy, które chcesz ominąć.

Poniżej kod, ponieważ dodałem oba readonlyi requirednadal przesyła formularz.
Po wyjęciu readonlydziała poprawnie.

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
źródło
0

zastąp identyfikator selektora czasu: IDofDatetimePicker swoim identyfikatorem.

Uniemożliwi to użytkownikowi wprowadzanie dalszych danych wejściowych z klawiatury, ale nadal będzie mógł uzyskać dostęp do wyskakującego okienka czasu.

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

Wypróbuj to źródło: https://github.com/jonthornton/jquery-timepicker/issues/109

Mohan
źródło
0

To pytanie ma wiele starszych odpowiedzi i wydaje się, że tylko odczyt jest ogólnie przyjętym rozwiązaniem. Uważam, że lepszym podejściem w nowoczesnych przeglądarkach jest użycie inputmode="none"w tagu wejściowym HTML:

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

lub, jeśli wolisz zrobić to w skrypcie:

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

Nie testowałem go szczegółowo, ale działa dobrze na konfiguracjach Androida, z którymi go używałem.

Peter Bowers
źródło
Kodowałem ten projekt głównie na mobilny Android. Ymmv z innymi platformami.
Peter Bowers
-1

Lub możesz na przykład użyć ukrytego pola do przechowywania wartości ...

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

i w $ ("# my_txtbox"). datepicker ({opcje:

        onSelect: function (dateText, inst) {
            $("#<% =hfDay.ClientID %>").val(dateText);
        }
Steinwolfe
źródło
-1

Jeśli chcesz, aby użytkownik wybrał datę z selektora dat, ale nie chcesz, aby użytkownik wpisał w polu tekstowym, użyj następującego kodu:

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

});

Shabbir.A. Husain
źródło