HTML-Texteingabe erlaubt nur numerische Eingaben

Question

Gibt es eine schnelle Möglichkeit, eine HTML-Texteingabe ( <input type=text /> ), um nur numerische Tastenanschläge (plus '.') zuzulassen?

Answer 1

Hier ist eine objektorientierte Neuimplementierung von emkey08's JavaScript Wiki Antwort die ein EventListener Objekt-Implementierung. (Siehe: MDN-Webdokumente EventListener )

Auf diese Weise wird verhindert, dass anonyme Ereignisbehandlungsfunktionen für jedes gefilterte Eingabeelement doppelt deklariert werden, während dies durch einen optionalen Rückruf dennoch möglich ist.

/**
 * Base input {@see Element} {@see EventListener} filter abstract class
 *
 * @implements EventListener
 */
class AbstractInputFilter {

  /**
   * Attach the input filter to the input {@see Element}
   *
   * @param inputElement The input {@see Element} to filter
   * @param isValid - The callback that determines if the input is valid.
   * @throws Error
   */
  constructor(inputElement, isValid = null) {
    // Abstract class
    if (this.constructor === AbstractInputFilter) {
      throw new Error("Object of Abstract Class cannot be created");
    }

    if (typeof isValid === "function") {
      this.isValid = isValid;
    }

    for (const event of ["input", "keydown", "keyup",
        "mousedown", "mouseup", "select", "contextmenu", "drop"]) {
      inputElement.addEventListener(event, this);
    }
  }

  /**
   * Checks the value is valid
   *
   * @callback isValid default call-back that will throw
   * an {Error} if not implemented by extending this 
   * {AbstractInputFilter} class.
   *
   * @param value The value to check
   * @returns {boolean}
   * @throws Error
   */
  isValid(value) {
    throw new Error('must be implemented by callback!');
  }

  /**
   * Handles the {@see event} dispatched by
   * the {@see EventTarget} object from the input {@see Element}
   * to filter its contant while it is being filled.
   *
   * @param event the {@see event} dispatched by
   * the {@see EventTarget} input {@see Element}
   * @override
   */
  handleEvent(event) {
    const inputElement = event.currentTarget;
    if (this.isValid(inputElement.value)) {
      inputElement.oldValue = inputElement.value;
      inputElement.oldSelectionStart = inputElement.selectionStart;
      inputElement.oldSelectionEnd = inputElement.selectionEnd;
    } else if (inputElement.hasOwnProperty("oldValue")) {
      inputElement.value = inputElement.oldValue;
      inputElement.setSelectionRange(
        inputElement.oldSelectionStart, inputElement.oldSelectionEnd);
    } else {
      this.value = "";
    }
  }
}

/**
 * Generic Input element {@see EventListener} filter
 *
 * @extends AbstractInputFilter
 * It needs the {@see AbstractInputFilter~isValid} callback
 * to determine if the input is valid.
 */
class InputFilter extends AbstractInputFilter {}

/**
 * Unsigned Integer Input element {@see EventListener} filter
 * @extends AbstractInputFilter
 */
class UIntInputFilter extends AbstractInputFilter {
  isValid(value) {
    return /^\d*$/.test(value);
  }
}

/**
 * Unsigned Float Input element {@see EventListener} filter
 * @extends AbstractInputFilter
 */
class UFloatInputFilter extends AbstractInputFilter {
  isValid(value) {
    return /^\d*\.?\d*$/.test(value);
  }
}

// Filter with pre-made InputFilters (re-use the filter)
new UIntInputFilter(document.getElementById("UInt"));
new UFloatInputFilter(document.getElementById("UFloat"));

// Filter with custom callback filter anonymous function
new InputFilter(document.getElementById("AlNum"), function(value) {
  return /^\w*$/.test(value);
});

<label>Unsigned integer: </label><input id="UInt"><br/>
<label>Unsigned float: </label><input id="UFloat"><br/>
<label>AlphaNumeric (no special characters): </label><input id="AlNum">

Answer 2

Einige der obigen Antworten verwenden veraltete Inhalte, wie die Verwendung von die .

Um zu prüfen, ob die gedrückte Taste eine Zahl ist, verwenden Sie eine keyup eventListener zum Lesen des Wertes von event.key . Dann verhindern Sie einfach die Eingabe des Zeichens, wenn es sich nicht um eine Zahl handelt. Sie können weitere Tasten in die Whitelist aufnehmen. Erlauben Sie dem Benutzer z. B., im Eingabefeld mit den Pfeilen vorwärts oder rückwärts zu navigieren, oder die Rücktaste zu drücken und die eingegebenen Zahlen zu löschen.

validate (event) {
  const isNumber = isFinite(event.key)
  const whitelist = ['Backspace','Delete','ArrowDown','ArrowUp','ArrowRight','ArrowLeft']
  const whitelistKey = whitelist.includes(event.key)

  if (!isNumber && !whitelistKey) {
    event.preventDefault()
  }
}

Answer 3

Danke Leute, das hilft mir wirklich weiter!

Ich fand den Perfert für die Datenbank sehr nützlich.

function numonly(root){
    var reet = root.value;    
    var arr1=reet.length;      
    var ruut = reet.charAt(arr1-1);   
        if (reet.length > 0){   
        var regex = /[0-9]|\./;   
            if (!ruut.match(regex)){   
            var reet = reet.slice(0, -1);   
            $(root).val(reet);   
            }   
        }  
 }

Fügen Sie dann den Eventhandler hinzu:

onkeyup="numonly(this);"

Answer 4

Input type="tel" funktioniert gut auf mobilen Geräten, daher sollten Sie diese Einstellung beibehalten.

Verwenden Sie einfach den folgenden Code (JQuery):

$("input[type=tel]").keydown(function (event) {
        return (event.which >= 48 && event.which <= 57) || //0 TO 9
        event.which === 8 || event.which == 46; //BACKSPACE/DELETE
    });

Und Ihr Beitrag wird sein:

<input type="tel" />

Und Sie können in das Eingabefeld id einfügen, was immer Sie wollen, und müssen keine anderen Listeneinträge binden.

Answer 5

Ich merke, dass dies ein alter Beitrag ist, aber ich dachte, er könnte jemandem helfen. Kürzlich musste ich ein Textfeld auf nur 5 Dezimalstellen begrenzen. In meinem Fall musste ALSO die Benutzereingabe kleiner als 0,1 sein.

<input type="text" value="" maxlength=7 style="width:50px" id="fmargin" class="formText"  name="textfield" onkeyup="return doCheck('#fmargin',event);">

Hier ist die Funktion doCheck

function doCheck(id,evt)
{
    var temp=parseFloat($(id).val());

    if (isNaN(temp))
        temp='0.0';
    if (temp==0)
        temp='0.0';

    $(id).val(temp);
}

Hier ist die gleiche Funktion, nur dass sie eine ganzzahlige Eingabe erzwingt

function doCheck(id,evt)
{
    var temp=parseInt($(id).val());

    if (isNaN(temp))
        temp='0';

    $(id).val(temp);
}

Ich hoffe, das hilft jemandem