jQuery Datepicker mit Texteingabe, die keine Benutzereingaben zulässt

140

Wie verwende ich den jQuery Datepicker mit einer Textfeldeingabe:

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

Dadurch kann der Benutzer keinen zufälligen Text in das Textfeld eingeben. Ich möchte, dass der Datepicker angezeigt wird, wenn das Textfeld den Fokus erhält oder der Benutzer darauf klickt, aber ich möchte, dass das Textfeld alle Benutzereingaben über die Tastatur (Kopieren und Einfügen oder andere) ignoriert. Ich möchte das Textfeld ausschließlich aus dem Datepicker-Kalender ausfüllen.

Ist das möglich?

jQuery 1.2.6
Datepicker 1.5.2

Elliot Vargas
quelle

Antworten:

269

Sie sollten in der Lage sein, das Attribut readonly für die Texteingabe zu verwenden, und jQuery kann den Inhalt weiterhin bearbeiten.

<input type='text' id='foo' readonly='true'>
Adam Bellaire
quelle
30
Für Leute, die Javascript deaktiviert haben, würde ich das Eingabefeld im HTML-Code alleine lassen und das Bit von jQuery das schreibgeschützte Attribut auf der Seite platzieren lassen. $ (Document) .ready (function () {$ ("# my_txtbox"). Attr 'readOnly', 'true'); }); Auf diese Weise können Benutzer mit
deaktiviertem
6
Das ist großartig. Das Standard-Styling, das Chrome (und möglicherweise andere Browser) zu schreibgeschützten Attributen hinzufügt, ist jedoch wirklich unangenehm. Überschreiben Sie es also unbedingt
Damon,
1
@FooBar Sie haben eine praktische Lösung vorgeschlagen. Nur ein Hinweis, dass der derzeit bevorzugte Weg (wie einige Zeit seit Ihrem Kommentar vergangen ist) zum Festlegen des schreibgeschützten Attributs über die Methode prop () erfolgt:$("#my_txtbox").prop('readonly', true)
Werner
2
Gemäß der WC3-HTML-Spezifikation ist es nur <input readonly> oder <input readonly = "readonly"> ohne true / false w3.org/TR/html5/forms.html#the-readonly-attribute
Ankit Sharma
5
Ich würde einen <input ... readonly="readonly" style="cursor:pointer; background-color: #FFFFFF">
Cursorzeiger verwenden
61

Aufgrund meiner Erfahrung würde ich die von Adhip Gupta vorgeschlagene Lösung empfehlen:

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

Der folgende Code lässt nicht den Benutzertyp neue Charaktere, aber wird sie zu löschen Zeichen zulassen:

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

Außerdem wird das Formular dadurch für diejenigen unbrauchbar, für die JavaScript deaktiviert ist:

<input type="text" readonly="true" />
2046
quelle
3
OP sollte in Betracht ziehen, dies aufgrund des JavaScript-Deaktivierungsszenarios als Antwort zu markieren.
CeejeeB
7
In welchem ​​Paralleluniversum verwenden Menschen eine reguläre Website mit deaktiviertem Javascript?
d.raev
Wie würde diese JAVASCRIPT-Antwort helfen, wenn JavaScript trotzdem deaktiviert wäre?
PW Kad
1
@PWKad Durch Hinzufügen des readonlyAttributs zum Feld über JS stellen Sie sicher, dass sie das Formular weiterhin über die standardmäßige manuelle Eingabe verwenden können, wenn JavaScript deaktiviert ist (und daher den Datepicker nicht verwenden können).
Jonathan Bender
2
Zum Zeitpunkt des Schreibens ist dies die bevorzugte Methode zum Festlegen des schreibgeschützten Attributs mit jQuery : $("#my_txtbox").prop('readonly', true);
Werner
13

Versuchen

$("#my_txtbox").keypress(function(event) {event.preventDefault();});
Brad8118
quelle
Ich habe dies mit asp.net mit Erfolg verwendet, da es nicht gut funktioniert hat, wenn das schreibgeschützte Attribut <asp: textbox> auf "true" gesetzt wurde
Russ Cam
2
Dies hindert niemanden daran, einen Wert zur späteren Bezugnahme in das Textfeld einzufügen.
Erik Philips
10

Wenn Sie die Datumsauswahl an mehreren Stellen wiederverwenden, können Sie das Textfeld auch über JavaScript ändern, indem Sie Folgendes verwenden:

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

direkt nach / vor dem Ort, an dem Sie Ihren Datepicker initialisieren.

Adhip Gupta
quelle
6
<input type="text" readonly="true" />

bewirkt, dass das Textfeld nach dem Postback seinen Wert verliert.

Sie sollten lieber den Vorschlag von Brad8118 verwenden, der perfekt funktioniert.

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

BEARBEITEN: Damit es für den IE funktioniert, verwenden Sie 'keydown' anstelle von 'keypress'.


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

Fügen Sie das schreibgeschützte Attribut in die Abfrage ein.

Chenthil
quelle
4

Sie haben zwei Möglichkeiten, um dies zu erreichen. (Soweit ich weiss)

  1. Option A: Machen Sie Ihr Textfeld schreibgeschützt. Dies kann wie folgt erfolgen.

  2. Option B: Ändern Sie den Fokus des Cursors. Stellen Sie ti auf Unschärfe. Dies kann durch Einrichten des Attributs onfocus="this.blur()"für das Textfeld Ihrer Datumsauswahl erfolgen.

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

user2182143
quelle
2
Der Unschärfehack war irgendwie großartig. Das Feld musste nicht schreibgeschützt sein, was einige Benutzer verwirrt, wenn sie den riesigen roten STOP auf einem Feld in Chrome erhalten ... es verhindert Ausschneiden und Einfügen, Löschen, Tippen usw. und der jquery-Datepicker funktioniert immer noch einwandfrei ...
David C
4

Nach der Initialisierung der Datumsauswahl:

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

        $(".project-date").keydown(false);
umutesen
quelle
Oder in einem einzigen Schritt$(".project-date").datepicker().keydown(false);
Christian Lescuyer
3

Zum Datumsauswahl-Popup, um den Fokus zu erhalten:

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

Wenn Sie keine Benutzereingaben wünschen, fügen Sie diese dem Eingabefeld hinzu

<input type="text" name="date" readonly="readonly" />
Eduardo Molteni
quelle
3

Ich bin gerade darauf gestoßen, also teile ich es hier. Hier ist die Option

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

Hier ist der Code.

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

Hier ist die Geige:

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

Meine Version von bootstrap-datetimepicker.js ist 4.17.45

Matija
quelle
1

Bei dieser Demo wird der Kalender über das Textfeld gelegt, sodass Sie ihn nicht eingeben können. Sie können das Eingabefeld auch so einstellen, dass es im HTML-Code schreibgeschützt ist.

<input type="text" readonly="true" />
Zach
quelle
1

HTML

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

CSS

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

Ich weiß, dass dieser Thread alt ist, aber für andere, die auf dasselbe Problem stoßen, die @ Brad8118-Lösung implementieren (was ich bevorzuge, denn wenn Sie die Eingabe schreibgeschützt vornehmen, kann der Benutzer den vom Datepicker eingefügten Datumswert nicht löschen Wenn er wählt) und auch verhindern muss, dass der Benutzer einen Wert einfügt (wie @ErikPhilips vorgeschlagen hat), lasse ich diesen Zusatz hier, der für mich funktioniert hat: $("#my_txtbox").bind('paste',function(e) { e.preventDefault(); //disable paste });von hier https://www.dotnettricks.com/learn/ jquery / disable-cut-copy-and-paste-in-textbox-using-jquery-javascript und das gesamte von mir verwendete spezifische Skript (stattdessen mit dem Fengyuanchen / Datepicker-Plugin):

$('[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
quelle
0

Ich habe festgestellt, dass das jQuery-Kalender-Plugin zumindest für mich im Allgemeinen besser für die Auswahl von Daten geeignet ist.

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

Hier ist Ihre Antwort, die gelöst werden kann. Sie möchten jquery nicht verwenden, wenn Sie die Benutzereingabe in der Textfeldsteuerung eingeschränkt haben.

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

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

$ ("# my_txtbox"). prop ('schreibgeschützt', wahr)

Lief wie am Schnürchen..

Prakash Singh
quelle
0

Anstatt ein Textfeld zu verwenden, können Sie auch die Schaltfläche verwenden. Funktioniert am besten für mich, wenn ich nicht möchte, dass Benutzer das Datum manuell schreiben.

Geben Sie hier die Bildbeschreibung ein

Ajjay Arora
quelle
0

Ich weiß, dass diese Frage bereits beantwortet ist und die meisten vorgeschlagen haben, readonlyAttribution zu verwenden .
Ich möchte nur mein Szenario teilen und antworten.

Nachdem ich readonlymeinem HTML-Element ein Attribut hinzugefügt hatte , trat das Problem auf, dass ich dieses Attribut nicht so requireddynamisch erstellen kann.
Auch versuchte Einstellung als beide readonlyundrequired zur HTML-Erstellungszeit einzustellen.

Daher werde ich vorschlagen, nicht zu verwenden, readonlywenn Sie es requiredauch einstellen möchten .

Verwenden Sie stattdessen

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

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

Dies erlaubt nur das Drücken der tabTaste.
Sie können weitere Schlüsselcodes hinzufügen, die Sie umgehen möchten.

Ich unten Code, da ich beide hinzugefügt habe readonlyund requiredes immer noch das Formular sendet.
Nach dem Entfernen readonlyfunktioniert es ordnungsgemäß.

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
quelle
0

Ersetzen Sie die ID der Zeitauswahl: IDofDatetimePicker durch Ihre ID.

Dadurch wird verhindert, dass der Benutzer weitere Tastatureingaben eingibt. Der Benutzer kann jedoch auf das Zeit-Popup zugreifen.

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

Versuchen Sie diese Quelle: https://github.com/jonthornton/jquery-timepicker/issues/109

Mohan
quelle
0

Diese Frage hat viele ältere Antworten und scheint schreibgeschützt die allgemein akzeptierte Lösung zu sein. Ich glaube, der bessere Ansatz in modernen Browsern ist die Verwendung inputmode="none"des HTML-Eingabe-Tags:

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

oder, wenn Sie es lieber im Skript tun möchten:

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

Ich habe es nicht ausgiebig getestet, aber es funktioniert gut mit den Android-Setups, mit denen ich es verwendet habe.

Peter Bowers
quelle
Ich habe dieses Projekt hauptsächlich für mobiles Android programmiert. Ymmv mit anderen Plattformen.
Peter Bowers
-1

Oder Sie können beispielsweise ein verstecktes Feld verwenden, um den Wert zu speichern ...

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

und in der $ ("# my_txtbox"). datepicker ({options:

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

Wenn Sie möchten, dass der Benutzer ein Datum aus der Datumsauswahl auswählt, der Benutzer jedoch nicht in das Textfeld eingeben soll, verwenden Sie den folgenden Code:

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

});

Shabbir.A.Hussain
quelle