it-swarm.com.de

JQuery erlaubt nur zwei Nachkommastellen

Ich habe die folgende JQuery-Funktion hier gefunden, die den Benutzer daran hindert, etwas einzugeben, das keine Zahl oder Dezimalzahl ist. Die Funktion funktioniert gut, aber ich möchte sie verbessern, um zu verhindern, dass der Benutzer 3 oder mehr Dezimalstellen eingeben kann, d. H. 99.999 nicht zulassen und 99.99 zulassen. Irgendwelche Ideen?

 function checkForInvalidCharacters(event, inputBox){                            
     if ((event.which != 46 || inputBox.val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {          
                event.preventDefault();           
            }   
     };
26
user676567

Die Logik ist jedes Mal, wenn ein Benutzer eine Nummer eingibt, zwei Dinge zu überprüfen.

  1. Hat der Benutzer den Dezimalpunkt eingegeben?
  2. Sind die Dezimalstellen mehr als zwei?

Für die erste können Sie $(this).val().indexOf('.') != -1 verwenden.

Für die zweite können Sie $(this).val().substring($(this).val().indexOf('.'), $(this).val().indexOf('.').length).length > 2 verwenden.

EDIT-1
Außerdem müssen Sie event.which != 0 && event.which != 8 hinzufügen, damit die Pfeiltasten und die Rücktaste in Firefox funktionieren (Manoj-Kommentar).

EDIT-2
Außerdem müssen Sie $(this)[0].selectionStart >= text.length - 2 hinzufügen, damit Sie Ziffern hinzufügen können, wenn sich der Cursor links vom Dezimalpunkt befindet (BIdesi-Kommentar).

EDIT-3
Außerdem müssen Sie prüfen, ob der Benutzer . gelöscht und an einem anderen Ort platziert hat, um einen Wert mit mehr als zwei Stellen nach der Dezimalstelle zu erstellen. Sie müssen also $this.val($this.val().substring(0, $this.val().indexOf('.') + 3)); hinzufügen, um zusätzliche Ziffern zu schneiden (Gilberto Sánchez-Kommentar)

EDIT-4
Um eingefügte Daten zu verarbeiten, müssen Sie einen Einfüge-Ereignishandler binden. Dann müssen Sie überprüfen, ob eingefügte Daten . mittext.indexOf('.') > -1 und mehr als 2 Stellen nach dem Dezimalzeichen mit text.substring(text.indexOf('.')).length > 3 haben. Wenn ja, müssen Sie zusätzliche Ziffern abschneiden. Sie müssen auch überprüfen, ob der Benutzer die numerische Eingabe mit $.isNumeric() (darasd comment) eingegeben hat.

Hier ist der Code:

$('.number').keypress(function(event) {
    var $this = $(this);
    if ((event.which != 46 || $this.val().indexOf('.') != -1) &&
       ((event.which < 48 || event.which > 57) &&
       (event.which != 0 && event.which != 8))) {
           event.preventDefault();
    }

    var text = $(this).val();
    if ((event.which == 46) && (text.indexOf('.') == -1)) {
        setTimeout(function() {
            if ($this.val().substring($this.val().indexOf('.')).length > 3) {
                $this.val($this.val().substring(0, $this.val().indexOf('.') + 3));
            }
        }, 1);
    }

    if ((text.indexOf('.') != -1) &&
        (text.substring(text.indexOf('.')).length > 2) &&
        (event.which != 0 && event.which != 8) &&
        ($(this)[0].selectionStart >= text.length - 2)) {
            event.preventDefault();
    }      
});

$('.number').bind("paste", function(e) {
var text = e.originalEvent.clipboardData.getData('Text');
if ($.isNumeric(text)) {
    if ((text.substring(text.indexOf('.')).length > 3) && (text.indexOf('.') > -1)) {
        e.preventDefault();
        $(this).val(text.substring(0, text.indexOf('.') + 3));
   }
}
else {
        e.preventDefault();
     }
});
.number {
  padding: 5px 10px;
  font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="number" />

42
laaposto

Ich habe die Funktion für einige zusätzliche Fälle aktualisiert.

  1. Es wird negative Zahlen zulassen
  2. Sie können die linke Seite der Dezimalstelle bearbeiten, wenn sich bereits 2 Ziffern auf der rechten Seite befinden
  3. Sie können die Pfeiltasten und die Rücktaste verwenden, wenn Sie sich in Firefox befinden
  4. Es behandelt auch eingefügte Daten

/**
 * Given an input field, this function will only allow numbers with up to two decimal places to be input.
 * @param {object} element
 * @return {number}
 */
function forceNumber(element) {
  element
    .data("oldValue", '')
    .bind("paste", function(e) {
      var validNumber = /^[-]?\d+(\.\d{1,2})?$/;
      element.data('oldValue', element.val())
      setTimeout(function() {
        if (!validNumber.test(element.val()))
          element.val(element.data('oldValue'));
      }, 0);
    });
  element
    .keypress(function(event) {
      var text = $(this).val();
      if ((event.which != 46 || text.indexOf('.') != -1) && //if the keypress is not a . or there is already a decimal point
        ((event.which < 48 || event.which > 57) && //and you try to enter something that isn't a number
          (event.which != 45 || (element[0].selectionStart != 0 || text.indexOf('-') != -1)) && //and the keypress is not a -, or the cursor is not at the beginning, or there is already a -
          (event.which != 0 && event.which != 8))) { //and the keypress is not a backspace or arrow key (in FF)
        event.preventDefault(); //cancel the keypress
      }

      if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2) && //if there is a decimal point, and there are more than two digits after the decimal point
        ((element[0].selectionStart - element[0].selectionEnd) == 0) && //and no part of the input is selected
        (element[0].selectionStart >= element.val().length - 2) && //and the cursor is to the right of the decimal point
        (event.which != 45 || (element[0].selectionStart != 0 || text.indexOf('-') != -1)) && //and the keypress is not a -, or the cursor is not at the beginning, or there is already a -
        (event.which != 0 && event.which != 8)) { //and the keypress is not a backspace or arrow key (in FF)
        event.preventDefault(); //cancel the keypress
      }
    });
}

forceNumber($("#myInput"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" />

3
Mike

Dies kann auch mit einem regulären Ausdruck erfolgen:

    $('.class').on('input', function () {
        this.value = this.value.match(/^\d+\.?\d{0,2}/);
    });

Benennen Sie den CSS-Selector .class nach Ihren Wünschen und setzen Sie ihn auf den Eingang.

3
Tegge

danke dir! Ich habe die Möglichkeit hinzugefügt, die Nummern und '.' Zu löschen. einmal getippt:

Der event.keyCode !== 8 führt diese Aktion für ausbackspace.

Der event.keyCode !== 46 führt diese Aktion für ausdelete.

$( document ).ready(function() {

    $('#Ds_Merchant_Amount').keypress(function(event) {
    if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57) ) {
        if (event.keyCode !== 8 && event.keyCode !== 46 ){ //exception
            event.preventDefault();
        }
    }
    if(($(this).val().indexOf('.') != -1) && ($(this).val().substring($(this).val().indexOf('.'),$(this).val().indexOf('.').length).length>2 )){
        if (event.keyCode !== 8 && event.keyCode !== 46 ){ //exception
            event.preventDefault();
        }
    }
  });
});
2
gtamborero

Numerische Werte Mit Dezimalpunkt bis zu 2 Dezimalpunktvalidierung . Abhängigkeit jQuery .

HTML -

<span>Float</span>
<input type="text" name="numeric" class='allownumericwithdecimal'>
<div>Numeric values only allowed  (With Decimal Point) </div>

JQuery-Code -

Methode 1-

    $(".allownumericwithdecimal").on("keypress keyup blur", function (event) {
     var patt = new RegExp(/[0-9]*[.]{1}[0-9]{2}/i);
     var matchedString = $(this).val().match(patt);
     if (matchedString) {
         $(this).val(matchedString);
     }
     if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
         event.preventDefault();
     }
 });

Methode 2 - 

 $(".allownumericwithdecimal").on("keypress keyup blur", function (event) {
     var patt = new RegExp(/(?<=\.\d\d).+/i);
     $(this).val($(this).val().replace(patt, ''));

     if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
         event.preventDefault();
     }
 });
0

Ich habe diese Routine aktualisiert, um Standard-Bearbeitungsfunktionen zu ermöglichen, da diese im obigen Code verhindert wurden. (Diese Routine dient nur zur Verarbeitung eines Float, kann aber so angepasst werden, dass nur 2 Stellen nach dem Dezimalzeichen zulässig sind.

var value = $(this).val().toString();

// Allowed Keys
if (event.which === 8 || event.which === 46 // Character delete
    || event.which === 16 || event.which === 17 // Modifier Key
    || event.which === 37 || event.which === 39  // Arrow Keys
    || (event.key.toLowerCase() === "a" && event.ctrlKey) // Select All
    || (event.key.toLowerCase() === "c" && event.ctrlKey) // Copy
    || (event.key.toLowerCase() === "x" && event.ctrlKey) // Cut
    || (event.key.toLowerCase() === "v" && event.ctrlKey) // Paste
    || (event.which === 45 && event.ctrlKey) // Old school copy (CTRL + INSERT)
    || (event.which === 46 && event.shiftKey) // Old school cut (SHIFT + DELETE)
    || (event.which === 45 && event.shiftKey) // Old school paste (SHIFT + INSERT)
    || (event.which === 35) // END
    || (event.which === 36) // HOME
    || (event.which === 35 && event.shiftKey) // SHIFT + END
    || (event.which === 36 && event.shiftKey) // SHIFT + HOME
    )
{
    return;
}
else if (event.which === 190) // Process decimal point
{
    if (value == "" || value.indexOf(".") > -1)
    {
        event.preventDefault();
    }
}
else if (event.which < 48 || event.which > 57 || event.ctrlKey || event.shiftKey) // Reject anything else that isn't a number
{
    event.preventDefault();
}
0
Dreamwalker

Versuche dies

HTML

<input type="text" id="min_rent" name="min_rent" onkeypress="return isPrice(event,$('#min_rent').val())">

Jquery

function isPrice(evt,value) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if((value.indexOf('.')!=-1) && (charCode != 45 && (charCode < 48 || charCode > 57)))
        return false;
    else if(charCode != 45 && (charCode != 46 || $(this).val().indexOf('.') != -1) && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

Worked Link demo

0
Sakthi Karthik