Wie kann ich mögliche Eingaben in ein HTML5-Element "number" einschränken?

359

Für <input type="number">Element maxlengthfunktioniert nicht. Wie kann ich das maxlengthElement für diese Nummer einschränken ?

Prasad
quelle
5
Für Leute, die eine bessere Lösung suchen, ist diese die beste: stackoverflow.com/questions/9361193/…
Ünsal Korkmaz
4
Das Attribut max funktioniert im Chrome-Browser des Android-Tablets nicht.
foreever
4
@ ÜnsalKorkmaz: Diese Lösung hat den Nachteil, dass sie die Zifferntastatur auf Android-Geräten nicht aufruft
Will

Antworten:

340

Außerdem können Sie ein maxAttribut hinzufügen , das die höchstmögliche Zahl angibt, die Sie einfügen können

<input type="number" max="999" />

Wenn Sie sowohl einen maxals auch einen minWert hinzufügen , können Sie den Bereich der zulässigen Werte angeben:

<input type="number" min="1" max="999" />

Das oben Gesagte hindert einen Benutzer immer noch nicht daran, einen Wert außerhalb des angegebenen Bereichs manuell einzugeben. Stattdessen wird ihm ein Popup angezeigt, in dem er aufgefordert wird, beim Senden des Formulars einen Wert innerhalb dieses Bereichs einzugeben, wie in diesem Screenshot gezeigt:

Geben Sie hier die Bildbeschreibung ein

Cyclonecode
quelle
4
Krister, das hat funktioniert. Auch wie @Andy sagte, habe ich den Oninput verwendet, um die zusätzlichen Zahlen zu schneiden. Referenz mathiasbynens.be/notes/oninput
Prasad
7
@Prasad - Wenn Andys Antwort richtig ist, wählen Sie sie anstelle der am häufigsten gewählten aus.
Moshe
81
Dies ist korrekt, sollte aber beachtet werden, da Andy angibt, dass dies nicht die Eingabe einer längeren Nummer einschränkt. Es ist also nicht wirklich das Äquivalent der maximalen Länge in einem Textfeld.
DA.
9
Wenn Sie einfach einen Float mit höherer Genauigkeit eingegeben haben, wird dieser unterbrochen. ZB 3.1415926 umgeht dies, weil es weniger als 999 und mehr als 1 ist.
0112
44
Ich weiß nicht, warum dies so positiv bewertet und akzeptiert wird, wenn es einfach nicht funktioniert! Es betrifft nur die "Spinner"
-Steuerelemente
115

Sie können die Attribute minund angeben max, mit denen nur innerhalb eines bestimmten Bereichs eingegeben werden kann.

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

Dies funktioniert jedoch nur für die Spinner-Steuertasten. Obwohl der Benutzer möglicherweise eine Nummer eingeben kann max, die größer als die zulässige ist , wird das Formular nicht gesendet.

Die Validierungsnachricht von Chrome für Zahlen, die größer als die max
Screenshot aus Chrome 15

Sie können das HTML5- oninputEreignis in JavaScript verwenden, um die Anzahl der Zeichen zu begrenzen:

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}
Andy E.
quelle
11
Ein mögliches Problem bei diesem JavaScript-Ansatz: Es funktioniert möglicherweise nicht wie erwartet, wenn die Einfügemarke nicht am Ende des Werts liegt. Wenn Sie beispielsweise den Wert "1234" in das Eingabefeld eingeben, die Einfügemarke wieder an den Anfang des Werts verschieben und "5" eingeben, erhalten Sie den Wert "5123". Dies unterscheidet sich von einem Eingabefeld = "Text" -Feld mit einer maximalen Länge von 4, in dem der Browser nicht zulässt, dass Sie ein fünftes Zeichen in das Feld "Voll" eingeben, und der Wert "1234" bleibt.
Jon Schneider
@ Andy, Offensichtlich sucht die Frage nach einem Nicht-JS-Weg zu tun maxlength.............
Pacerier
4
@ Pacerier: Bedeutete etwas in meiner Antwort, dass ich etwas anderes dachte? Wie Sie sehen, habe ich die bestmögliche Lösung angeboten, die nur mit HTML erreicht werden kann, zusammen mit einem zusätzlichen Vorschlag, der JavaScript verwendet, bei dem das OP möglicherweise verhindern wollte, dass der Benutzer mehr Zeichen als zulässig eingibt.
Andy E
84

Wenn Sie nach einer mobilen Weblösung suchen, bei der Ihr Benutzer einen Nummernblock anstelle einer Volltexttastatur sehen soll. Verwenden Sie type = "tel". Es funktioniert mit maximaler Länge, wodurch Sie kein zusätzliches Javascript erstellen müssen.

Mit Max und Min kann der Benutzer weiterhin Zahlen eingeben, die über max und min hinausgehen, was nicht optimal ist.

Duane
quelle
3
Toller Fund, das hat wie ein Zauber funktioniert, Daumen hoch, weil man kein zusätzliches Javascript erstellen muss.
Diego
9
Ich habe festgestellt, dass dies nicht die beste Lösung für numerische Eingaben ist, da eine "Tel" -Eingabe zusätzliche Symbole zulässt und Buchstaben neben jeder Zahl anzeigt. Die rein numerische Tastatur sieht viel sauberer aus.
Hawkharris
@hawkharris Sie sind richtig, type = "number" ist die sauberere Benutzeroberfläche. Es ist einfacher, versehentlich einen schlechten Zeichen einzugeben. Daher ist eine zusätzliche Validierung erforderlich, um sicherzustellen, dass der Benutzer keine fehlerhaften Daten eingibt. Bedenken Sie aber auch, dass der Benutzer genauso gut alle Dezimalstellen mit einer Zifferntastatur eingeben kann. Auch löst es die obige Frage nicht ohne zusätzliches JavaScript.
Duane
1
Vielen Dank, ich arbeite an ionic Framework Mobile App und dies löste mein Problem
Ahmed
1
Bei Verwendung mit pattern = "[0-9] *" werden die zusätzlichen Symbole deaktiviert
apereira
71

Sie können all dies folgendermaßen kombinieren:

<input name="myinput_drs"
oninput="maxLengthCheck(this)"
type = "number"
maxlength = "3"
min = "1"
max = "999" />

<script>
  // This is an old version, for a more recent version look at
  // https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/
  function maxLengthCheck(object)
  {
    if (object.value.length > object.maxLength)
      object.value = object.value.slice(0, object.maxLength)
  }
</script>


Update:
Möglicherweise möchten Sie auch verhindern, dass nicht numerische Zeichen eingegeben werden, da object.lengthdies eine leere Zeichenfolge für die Zahleneingaben ist und daher deren Länge 0. Somit maxLengthCheckfunktioniert die Funktion nicht.

Lösung: Beispiele finden
Sie hier oder hier .

Demo - Die Vollversion des Codes finden Sie hier:
http://jsfiddle.net/DRSDavidSoft/zb4ft1qq/1/

Update 2: Hier ist der Update-Code: https://jsfiddle.net/DRSDavidSoft/zb4ft1qq/2/

Update 3: Bitte beachten Sie, dass die Eingabe von mehr als einem Dezimalpunkt den Zahlenwert verfälschen kann.

David Refoua
quelle
Dies ist eine gute Lösung, aber ich finde, dass object.value.length 0 zurückgibt, wenn nicht numerische Werte eingegeben wurden.
Andrew
1
@AndrewSpear Dies liegt daran, dass object.value eine leere Zeichenfolge ist, wenn Sie nicht numerische Werte in Eingaben mit einem Typ von 'number' eingeben. Siehe die Dokumentation. Bitte lesen Sie auch mein Update, um dieses Problem zu beheben.
David Refoua
Dies wird immer noch unterbrochen, wenn Sie mehr als einen Dezimalpunkt eingeben, z. B. 111..1111. Verwenden Sie diesen Code nicht aus Sicherheitsgründen, da möglicherweise immer noch schädlicher Code weitergegeben wird.
PieBie
@PieBie Dude, dieser Code ist seit mehr als 3 Jahren. Verwenden Sie stattdessen jQuery.
David Refoua
1
Ja, das weiß ich, aber Anfänger können es immer noch kopieren und einfügen.
PieBie
26

Es ist sehr einfach, mit etwas Javascript können Sie ein simulieren maxlength, probieren Sie es aus:

//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
Maycow Moura
quelle
12
Mit Ihrer Lösung können Sie die Rücktaste nicht mehr verwenden, sobald Sie 2 Zeichen erreicht haben. aber ich vermisse ein paar Dinge für eine funktionale Lösung
Christophe Debove
12
Anstelle von onKeyDown sollten Sie onKeyPress verwenden.
Rupesh Arora
1
funktioniert nicht, wenn Sie den Text markieren und ein Zeichen drücken (dh um den Inhalt der Eingabe zu ersetzen)
Arijoon
Überprüfen Sie dies, wenn dies nicht von den folgenden Schlüsseln stammt. stackoverflow.com/a/2353562/1534925
Akshay
3
Das Problem dabei keydownist, dass Sie die Rücktaste nicht mit maximal Zeichen verwenden können. Das Problem dabei keypressist, dass Sie über die maximalen Zeichen hinaus kopieren und einfügen können.
Stavm
23

Wenn Ihr Maximalwert beispielsweise 99 und der Minimalwert 0 ist, können Sie dies zum Eingabeelement hinzufügen (Ihr Wert wird durch Ihren Maximalwert usw. neu geschrieben).

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

Dann (wenn Sie möchten) können Sie überprüfen, ob die Eingabe wirklich eine Nummer ist

Richard
quelle
... Großartig, aber du brauchst kein Min und Max mehr, Alter. (nur sagen)
Xoxel
2
@xoxel Sie tun, wenn Sie möchten, dass die Warnmeldung weiterhin angezeigt wird
DNKROZ
Das ist wirklich gut ... Danke
Vincy Oommen
der Verallgemeinerung halber würde ich tunonKeyUp="if(this.value>this.max)this.value=this.max;if(this.value<this.min)this.value=this.min;"
Oriadam
18

Sie können es als Text angeben, aber Pettern hinzufügen, die nur mit Zahlen übereinstimmen:

<input type="text" pattern="\d*" maxlength="2">

Es funktioniert perfekt und auch auf Mobilgeräten (getestet auf iOS 8 und Android) erscheint die Zifferntastatur.

Chris Panayotoff
quelle
Das Musterattribut
diazdeteran
Ja, danke für das Zeigen, aber wir haben die IE9-Unterstützung eingestellt (den Senf davon abschneiden), und ich bevorzuge es gegenüber JS-Methoden. Kommt auf das Projekt an.
Chris Panayotoff
2
Ein Benutzer wird dabei nicht daran gehindert, nicht numerische Zeichen einzugeben. Sie können 2 beliebige Zeichen eingeben. Das patternbewirkt , dass nur die Validierung Hervorhebung.
Brt
getestet auf Android 9 (Nokia 8), aber ich bekomme die normale Tastatur :( irgendwelche Ideen?
Oriadam
14

//For Angular I have attached following snippet.
<div ng-app="">
  <form>
    Enter number: <input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0">
  </form>
  <h1>You entered: {{number}}</h1>
</div>

Wenn Sie das Ereignis "onkeypress" verwenden, erhalten Sie während der Entwicklung keine Benutzereinschränkungen als solche (Unit-Test). Wenn Sie Anforderungen haben, die es dem Benutzer nicht erlauben, nach einem bestimmten Limit einzugeben, sehen Sie sich diesen Code an und versuchen Sie es einmal.

Prasad Shinde
quelle
1
Die Probleme, die ich hier sehe, sind: 1. Ersetzen durch Auswählen des Textes und Typ funktioniert nicht, wenn die Eingabe 7 Zahlen erreicht hat. 2. Erhöhen der Eingabe um 1, wenn der Überlauf "Boarder" trifft, funktioniert -> 9999999 und klicke nach oben Taste.
Bricht
Ich habe es mit einfacher Version Javascript versucht. Wenn Sie möchten, können Sie das Code-Snippet ausführen sehen. Als solches habe ich keine Einschränkung gefunden.
Prasad Shinde
1
Ich habe auch keine Einschränkungen gefunden. Es stoppt bei 7 Stellen. Ich verwende diese Lösung für meinen Code.
Claudio
Es gibt eine Begrenzung. Wenn Sie das Limit erreicht haben, wählen Sie alle aus und möchten Sie sie ersetzen. Es funktioniert nicht. Der Ersatz funktioniert für mich nur, wenn ich den Wert mit dem aktuellen überschreibe, bevor ich false zurückgebe.
Insomnia88
@ Insomnia88, @ edub was ist, wenn wir Funktion schreiben und notwendige Bedingungen überprüfen ...
Prasad Shinde
12

Eine andere Möglichkeit besteht darin, einfach einen Listener für alles mit dem Attribut maxlength hinzuzufügen und den Slice-Wert hinzuzufügen. Angenommen, der Benutzer möchte nicht in jedem Ereignis, das sich auf die Eingabe bezieht, eine Funktion verwenden. Hier ist ein Code-Snippet. Ignorieren Sie den CSS- und HTML-Code. Auf JavaScript kommt es an.

// Reusable Function to Enforce MaxLength
function enforce_maxlength(event) {
  var t = event.target;
  if (t.hasAttribute('maxlength')) {
    t.value = t.value.slice(0, t.getAttribute('maxlength'));
  }
}

// Global Listener for anything with an maxlength attribute.
// I put the listener on the body, put it on whatever.
document.body.addEventListener('input', enforce_maxlength);
label { margin: 10px; font-size: 16px; display: block }
input { margin: 0 10px 10px; padding: 5px; font-size: 24px; width: 100px }
span { margin: 0 10px 10px; display: block; font-size: 12px; color: #666 }
<label for="test_input">Text Input</label>
<input id="test_input" type="text" maxlength="5"/>
<span>set to 5 maxlength</span>

<br>

<label for="test_input">Number Input</label>
<input id="test_input" type="number" min="0" max="99" maxlength="2"/>
<span>set to 2 maxlength, min 0 and max 99</span>

Brandon Buttars
quelle
10

Die maximale Länge funktioniert nicht so, <input type="number"wie ich es am besten kenne, oninputwenn ich das Ereignis verwende, um die maximale Länge zu begrenzen. Bitte beachten Sie den folgenden Code für eine einfache Implementierung.

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />
Neha Jain
quelle
Lief wie am Schnürchen!
SiboVG
9

Nehmen wir an, Sie wollten, dass der maximal zulässige Wert 1000 beträgt - entweder getippt oder mit dem Spinner.

Sie beschränken die Spinnerwerte mit: type="number" min="0" max="1000"

und beschränken Sie, was von der Tastatur mit Javascript eingegeben wird: onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }"

<input type="number" min="0" max="1000" onkeyup="if(parseInt(this.value)>1000){ this.value =1000; return false; }">
Stnfordly
quelle
8

Wie von anderen angegeben, ist min / max nicht dasselbe wie maxlength, da Personen immer noch einen Float eingeben können, der größer ist als die von Ihnen beabsichtigte maximale Stringlänge. Um das maxlength-Attribut wirklich zu emulieren, können Sie zur Not so etwas tun (dies entspricht maxlength = "16"):

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">
thdoan
quelle
Slice löscht Zeichen ohne Wissen des Endbenutzers, wenn es dazwischen eingefügt wird. wohingegen die maximale Länge blockiert.
Pradeep Kumar Prabaharan
@PradeepKumarPrabaharan maxlengthwird von Zahleneingaben nicht unterstützt. In meinem Beispiel value.slice(0,16)wird erst aktiviert, wenn der Eingabewert länger als 16 Zeichen ist.
Donnerstag,
Ja, die maximale Länge wird für Zahleneingaben nicht unterstützt. Dieser Code ist gud, aber dieser Code stimmt nicht genau mit der Eigenschaft der maximalen Länge überein.
Pradeep Kumar Prabaharan
@TobiasGaertner type="number"kümmert sich darum :).
Donnerstag,
@ 10basetom ... abhängig vom Browser ... zB in FF können Sie immer noch Zeichen eingeben und diese hören nicht nach dem Limit auf - aber im Zusammenhang mit der Idee der Typennummer ist dies eine akzeptable Lösung.
Tobias Gaertner
6

Maycow Mouras Antwort war ein guter Anfang. Seine Lösung bedeutet jedoch, dass bei Eingabe der zweiten Ziffer alle Bearbeitungen des Feldes gestoppt werden. Sie können also keine Werte ändern oder Zeichen löschen.

Der folgende Code stoppt bei 2, ermöglicht jedoch die Fortsetzung der Bearbeitung.

//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
Tim Wright
quelle
2
Nee. Versuchen Sie, einen Wert einzufügen.
Qwertiy
6

Ich hatte dieses Problem schon einmal und habe es mit einer Kombination aus HTML5-Nummerntyp und jQuery gelöst.

<input maxlength="2" min="0" max="59" name="minutes" value="0" type="number"/>

Skript:

$("input[name='minutes']").on('keyup keypress blur change', function(e) {
    //return false if not 0-9
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       return false;
    }else{
        //limit length but allow backspace so that you can still delete the numbers.
        if( $(this).val().length >= parseInt($(this).attr('maxlength')) && (e.which != 8 && e.which != 0)){
            return false;
        }
    }
});

Ich weiß nicht, ob die Ereignisse etwas übertrieben sind, aber es hat mein Problem gelöst. JSfiddle

nach unten kippen
quelle
Sie können leicht Zeichen einfügen.
Jessica
4

HTML-Eingabe

 <input class="minutesInput" type="number" min="10" max="120" value="" />

jQuery

 $(".minutesInput").on('keyup keypress blur change', function(e) {

    if($(this).val() > 120){
      $(this).val('120');
      return false;
    }

  });
Tyrannisieren
quelle
4

Eine einfache Möglichkeit, die maximale Länge für Zahleneingaben festzulegen, ist:

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
HexboY
quelle
funktioniert nicht auf Android Chrome. onkeypress hat einige Probleme damit.
Aakash Thakur
3

Wie bei geben type="number"Sie eine Eigenschaft maxanstelle von an maxlength, bei der es sich um die maximal mögliche Anzahl handelt. Also mit 4 Ziffern maxsollte es sein 9999, 5 Ziffern 99999und so weiter.

Wenn Sie sicherstellen möchten, dass es sich um eine positive Zahl handelt, können Sie auch min="0"positive Zahlen festlegen .

Jan Dragsbaek
quelle
3

Pfui. Es ist, als hätte jemand die Hälfte der Implementierung aufgegeben und gedacht, niemand würde es bemerken.

Aus irgendeinem Grund verwenden die obigen Antworten die Attribute minund nicht max. Diese jQuery beendet es:

    $('input[type="number"]').on('input change keyup paste', function () {
      if (this.min) this.value = Math.max(parseInt(this.min), parseInt(this.value) || 0);
      if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
    });

Es würde wahrscheinlich auch als benannte Funktion "oninput" ohne jQuery funktionieren, wenn Sie einen dieser "jQuery-is-the-devil" -Typen haben.

Michael Cole
quelle
es beantwortet die Frage nicht richtig, hat aber abgestimmt, da es mein Problem gelöst hat :)
TrOnNe
2

Wie ich herausgefunden , können Sie nicht von verwenden onkeydown, onkeypressoder onkeyupEreignisse für eine Komplettlösung einschließlich mobilen Browser. Übrigens onkeypressist veraltet und in Chrome / Opera für Android nicht mehr vorhanden (siehe: UI Events W3C Working Draft, 04. August 2016 ).

Ich habe eine Lösung nur mit dem oninputEreignis gefunden. Möglicherweise müssen Sie nach Bedarf eine zusätzliche Nummernprüfung durchführen, z. B. ein negatives / positives Vorzeichen oder Dezimal- und Tausendertrennzeichen und dergleichen. Zunächst sollte jedoch Folgendes ausreichen:

function checkMaxLength(event) {
	// Prepare to restore the previous value.
	if (this.oldValue === undefined) {
		this.oldValue = this.defaultValue;
	}

	if (this.value.length > this.maxLength) {
		// Set back to the previous value.
		this.value = oldVal;
	}
	else {
		// Store the previous value.
		this.oldValue = this.value;
		
		// Make additional checks for +/- or ./, etc.
		// Also consider to combine 'maxlength'
		// with 'min' and 'max' to prevent wrong submits.
	}
}

Ich würde auch zu kombinieren , empfehlen maxlengthmit minund maxfalsch vorträgt zu verhindern , wie oben mehrmals erwähnt.

markus s
quelle
2
<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

oder wenn du nichts eingeben willst

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />
j4r3k
quelle
1

Sie können dies auch für numerische Eingaben mit Längenbeschränkung versuchen

<input type="tel" maxlength="3" />
Shinobi
quelle
@tiltdown Sry für Fehlertyp. Die Antwort wurde korrigiert.
Shinobi
1

Ich weiß, dass es bereits eine Antwort gibt, aber wenn Sie möchten, dass sich Ihre Eingabe genau wie das maxlengthAttribut verhält oder so nah wie möglich ist, verwenden Sie den folgenden Code:

(function($) {
 methods = {
    /*
     * addMax will take the applied element and add a javascript behavior
     * that will set the max length
     */
    addMax: function() {
        // set variables
        var
            maxlAttr = $(this).attr("maxlength"),
            maxAttR = $(this).attr("max"),
            x = 0,
            max = "";

        // If the element has maxlength apply the code.
        if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) {

            // create a max equivelant
            if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){
                while (x < maxlAttr) {
                    max += "9";
                    x++;
                }
              maxAttR = max;
            }

            // Permissible Keys that can be used while the input has reached maxlength
            var keys = [
                8, // backspace
                9, // tab
                13, // enter
                46, // delete
                37, 39, 38, 40 // arrow keys<^>v
            ]

            // Apply changes to element
            $(this)
                .attr("max", maxAttR) //add existing max or new max
                .keydown(function(event) {
                    // restrict key press on length reached unless key being used is in keys array or there is highlighted text
                    if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false;
                });;
        }
    },
    /*
     * isTextSelected returns true if there is a selection on the page. 
     * This is so that if the user selects text and then presses a number
     * it will behave as normal by replacing the selection with the value
     * of the key pressed.
     */
    isTextSelected: function() {
       // set text variable
        text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        return (text.length > 0);
    }
};

$.maxlengthNumber = function(){
     // Get all number inputs that have maxlength
     methods.addMax.call($("input[type=number]"));
 }

})($)

// Apply it:
$.maxlengthNumber();
Philll_t
quelle
@Phill_t vielleicht kannst du mich aufklären? Ich habe Ihren Code verwendet und er funktioniert im Prinzip gut, ABER "$ (this) .attr (" maxlength ")" liefert immer 2. UND warum ist es besser, "$ (this) .attr (" maxlength ")" zu verwenden? ob es statt nur "this.maxlength" funktioniert hat, das ich getestet habe und wie erwartet funktionierte und kürzer und imho auch klarer zu lesen ist? Habe ich etwas vergessen?
Markus s
Was meinst du mit "liefert 2"?
Philll_t
Phill_t ich entschuldige mich. "this.maxLength" funktioniert nur im Rahmen der Keydown-Funktion. In der Funktion "addMax" ist "this" eher das Dokument als das erwartete Element und hat daher unterschiedliche Attributwerte. Wie würde ich stattdessen Zugriff auf die Zahleneingabe erhalten? Funktioniert der obige Code wirklich auf Ihrer Seite? Ich habe mit Chrome / Opera / Vivaldi, Firefox, Edge, IE und Safari getestet und hatte für jeden Browser die gleichen Ergebnisse. Okay, in Edge maxlegth = "1" und maxlength = "2", wo zwar funktioniert, aber "$ (this) .attr (" maxlength ")" für eine höhere Zahl nicht weiter erhöht wird !!? @anybody: Irgendwelche Vorschläge?
Markus s
Wie gesagt, es sind immer zwei, weil es eher auf dem Dokument als auf dem fraglichen Element aufgerufen wird, wie ich beim Debuggen herausgefunden habe. Übrigens möchten Sie vielleicht auch meine Lösung betrachten, die ich nach dem Studium Ihrer herausgefunden habe: stackoverflow.com/a/41871960/1312012
markus s
0

Weitere relevante Attribute wären minund max.

Marcel
quelle
0

Dies könnte jemandem helfen.

Mit ein wenig Javascript können Sie nach allen datetime-lokalen Eingaben suchen und suchen, ob das Jahr, in dem der Benutzer eine Eingabe versucht, größer als 100 Jahre in der Zukunft ist:

$('input[type=datetime-local]').each(function( index ) {

    $(this).change(function() {
      var today = new Date();
      var date = new Date(this.value);
      var yearFuture = new Date();
      yearFuture.setFullYear(yearFuture.getFullYear()+100);

      if(date.getFullYear() > yearFuture.getFullYear()) {

        this.value = today.getFullYear() + this.value.slice(4);
      }
    })
  });
Simon Berton
quelle