pluszeichen in html input type=number

Lesezeit: 2 Minuten

Benutzer-Avatar
Nico Timmermann

Weiß jemand, ob es möglich ist, ein Pluszeichen in ein HTML-Eingabefeld namens type=number einzufügen? Ich habe ein Szenario, in dem Benutzer einen Modifikatorwert eingeben müssen, der entweder +1 bis +10 oder -1 bis -10 ist. Ich möchte dem Benutzer sehr deutlich machen, dass sein eingegebener Wert den resultierenden Wert erhöht. Daher wäre es großartig, wenn einem positiv eingegebenen Wert ein +-Zeichen vorangestellt würde.

Ich verwende diese Eingabe in einem reaktiven Angular2-Formular mit Bootstrap-Styling. Also eine Angular2-Direktive, ein Boostrap-Stil oder sogar eine Jquery-Lösung sind willkommen

Was ich bisher gesehen habe, ist das Hinzufügen von Währungssymbolen innerhalb des Formularsteuerelements oder das Hinzufügen von +- und Minus-Schaltflächen, um den Wert zu erhöhen und zu verringern. Aber das ist nicht das, was ich will, also bezweifle ich, ob das überhaupt möglich ist.

Benutzer-Avatar
Samy Sammour

Ich glaube nicht, dass es möglich ist, die Eingabe zu manipulieren. Das Standardverhalten ist “-” für negative und kein Vorzeichen für positive Zahlen.

Selbst wenn Sie einige benutzerdefinierte UI-Frameworks wie JQuery UI, Bootstrap, Angular Material … überprüft haben, erhalten Sie nicht das gewünschte Verhalten.

Ich denke, die einzige Lösung dafür besteht darin, Ihren eigenen benutzerdefinierten Code zu schreiben.

Zwei Szenarien sind möglich:

1- Eine Eingabe mit Text und die Bearbeitung erfolgt in Javascript.

2- Erstellen Sie eine Pipe in angle2 und geben Sie sie dem Element, das meiner Meinung nach viel einfacher ist als das erste.

  • Vielen Dank! Eine Pfeife zu verwenden ist in der Tat ein guter Vorschlag, an den ich bisher nicht gedacht hatte. Werde diese als Antwort markieren

    – Nico Timmermann

    13. März 2017 um 18:45 Uhr

Nein, es ist nicht möglich. Das Zahlenfeld akzeptiert nur -, 0-9 und e eingegeben werden. Als Problemumgehung könnten Sie die + im HTML vor der Eingabe, zB:

+ <input type="number" />

Alternativ können Sie einen Standard verwenden type="text" Eingabe, aber das würde bedeuten, dass Sie Ihre eigene Validierungslogik erstellen würden, was den Code viel komplexer machen würde.

  • Abgesehen von einer JavaScript-Problemumgehung, die eine Reihe von Problemen verursachen kann, ist dies die beste Methode.

    Benutzer7236046

    9. März 2017 um 9:58 Uhr

Ich hoffe, das wird euch helfen!!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).on('keypress','#input',function (e) {
    var keyCode = e.which;

    if ($(this).val().trim().charAt(0) == "\u002B") {
       if (  keyCode == 43 ) { 
          return false;
       }
    }
    else{
       for (var i = 1; i < $(this).val().length+1; i++) {
          if(i!=0){
             if (  keyCode == 43 ) { 
                return false;
             }
          }
       }
     }
  });

  $(document).on('input', '#input', function() {
     this.value = this.value.replace(/[^+{1}|^0-9]/g,'');
  });
</script>

1005680cookie-checkpluszeichen in html input type=number

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy