it-swarm.com.de

Wie lässt sich in HTML-Eingabefeld mit jQuery nur numerisch (0-9) zulassen?

Ich erstelle eine Webseite, auf der ich ein Eingabetextfeld habe, in dem nur numerische Zeichen wie (0,1,2,3,4,5 ... 9) 0-9 zulässig sind.

Wie mache ich das mit jQuery?

837
Prashant

Hinweis: Dies ist eine aktualisierte Antwort. Die folgenden Kommentare beziehen sich auf eine alte Version, die mit Schlüsselcodes herumgespielt hat.

jQuery

Das Plugin inputFilter ermöglicht Ihnen die Verwendung beliebiger Eingabefilter für einen Text <input>, Einschließlich verschiedener numerischer Filter (siehe unten).

Im Gegensatz zu den meisten anderen Lösungen unterstützt dieses korrekt Kopieren + Einfügen, Ziehen + Ablegen, alle Tastaturkürzel, alle Kontextmenüoperationen, alle nicht tippbaren Tasten (z. B. Cursor- und Navigationstasten), die Caret-Position, alle Tastaturlayouts aller Sprachen und Plattformen und alle Browser seit IE 9 .

Probieren Sie es aus auf JSFiddle .

// Restricts input for each element in the set of matched elements to the given inputFilter.
(function($) {
  $.fn.inputFilter = function(inputFilter) {
    return this.on("input keydown keyup mousedown mouseup select contextmenu drop", function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  };
}(jQuery));

$(document).ready(function() {
  // Restrict input to digits by using a regular expression filter.
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);
  });
});

Einige Eingabefilter, die Sie möglicherweise verwenden möchten:

  • Ganzzahlige Werte (nur positiv):
    /^\d*$/.test(value)
  • Ganzzahlige Werte (positiv und bis zu einer bestimmten Grenze):
    /^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)
  • Ganzzahlige Werte (sowohl positiv als auch negativ):
    /^-?\d*$/.test(value)
  • Gleitkommawerte (wobei sowohl . Als auch , Als Dezimaltrennzeichen zulässig sind):
    /^-?\d*[.,]?\d*$/.test(value)
  • Währungswerte (d. H. Höchstens zwei Dezimalstellen):
    /^-?\d*[.,]?\d{0,2}$/.test(value)
  • Nur von A bis Z (d. H. Lateinische Grundbuchstaben):
    /^[a-z]*$/i.test(value)
  • Nur lateinische Buchstaben (dh Englisch und die meisten europäischen Sprachen, siehe https://unicode-table.com für Details zu Unicode Zeichenbereiche):
    /^[a-z\u00c0-\u024f]*$/i.test(value)
  • Hexadezimale Werte:
    /^[0-9a-f]*$/i.test(value)

Beachten Sie, dass Sie immer noch müssen eine serverseitige Validierung durchführen!

Reines JavaScript (ohne jQuery)

jQuery wird dafür eigentlich nicht benötigt, Sie können dasselbe auch mit reinem JavaScript tun. Siehe diese Antwort oder probiere es selbst auf JSFiddle .

HTML 5

HTML 5 hat eine native Lösung mit <input type="number"> (Siehe Spezifikation ). Beachten Sie jedoch, dass die Browserunterstützung unterschiedlich ist:

  • Die meisten Browser validieren die Eingabe nur beim Absenden des Formulars und nicht beim Tippen.
  • Die meisten mobilen Browser unterstützen die Attribute step, min und max nicht.
  • In Chrome (Version 71.0.3578.98) kann der Benutzer weiterhin die Zeichen e und E in das Feld eingeben. Siehe auch diese Frage .
  • Mit Firefox (Version 64.0) und Edge (EdgeHTML Version 17.17134) kann der Benutzer weiterhin any Text in das Feld eingeben.

Probieren Sie es aus auf w3schools.com .

1208
kgiannakakis

Hier ist die Funktion, die ich benutze:

// Numeric only control handler
jQuery.fn.ForceNumericOnly =
function()
{
    return this.each(function()
    {
        $(this).keydown(function(e)
        {
            var key = e.charCode || e.keyCode || 0;
            // allow backspace, tab, delete, enter, arrows, numbers and keypad numbers ONLY
            // home, end, period, and numpad decimal
            return (
                key == 8 || 
                key == 9 ||
                key == 13 ||
                key == 46 ||
                key == 110 ||
                key == 190 ||
                (key >= 35 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (key >= 96 && key <= 105));
        });
    });
};

Sie können es dann an Ihr Steuerelement anhängen, indem Sie

$("#yourTextBoxName").ForceNumericOnly();
167
Kelsey

In der Reihe:

<input name="number" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

Unauffälliger Stil (mit jQuery):

$('input[name="number"]').keyup(function(e)
                                {
  if (/\D/g.test(this.value))
  {
    // Filter non-digits from input value.
    this.value = this.value.replace(/\D/g, '');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="number">
137
Patrick Fisher

Sie können einfach einen einfachen regulären JavaScript-Ausdruck verwenden, um rein numerische Zeichen zu testen:

/^[0-9]+$/.test(input);

Dies gibt true zurück, wenn die Eingabe numerisch ist, andernfalls false.

oder für den Ereignis-Keycode, verwenden Sie einfach die folgenden Informationen:

     // Allow: backspace, delete, tab, escape, enter, ctrl+A and .
    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
         // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) || 
         // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
             // let it happen, don't do anything
             return;
    }

    var charValue = String.fromCharCode(e.keyCode)
        , valid = /^[0-9]+$/.test(charValue);

    if (!valid) {
        e.preventDefault();
    }
100
TheDeveloper

Sie können bei Eingabeereignissen wie folgt verwenden:

$(document).on("input", ".numeric", function() {
    this.value = this.value.replace(/\D/g,'');
});

Aber was ist dieses Code-Privileg? 

  • Es funktioniert auf mobilen Browsern (Keydown und Keydown haben Probleme).
  • Es funktioniert auch bei AJAX generierten Inhalten, da wir "on" verwenden.
  • Bessere Leistung als Keydown, zum Beispiel beim Einfügen von Ereignissen.
74

Kurz und süß - auch wenn dies nach 30+ Antworten nie viel Aufmerksamkeit findet;)

  $('#number_only').bind('keyup paste', function(){
        this.value = this.value.replace(/[^0-9]/g, '');
  });
43
Rid Iculous

Verwenden Sie die JavaScript-Funktion isNaN ,

if (isNaN($('#inputid').val()))

if (isNaN (document.getElementById ('inputid'). val ())) 

if (isNaN(document.getElementById('inputid').value))

Update: Und hier ein Nizza-Artikel, der darüber spricht, aber jQuery verwendet: Eingabe von HTML-Textfeldern auf numerische Werte beschränken

43
Amr Elgarhy
$(document).ready(function() {
    $("#txtboxToFilter").keydown(function(event) {
        // Allow only backspace and delete
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
            // let it happen, don't do anything
        }
        else {
            // Ensure that it is a number and stop the keypress
            if (event.keyCode < 48 || event.keyCode > 57 ) {
                event.preventDefault(); 
            }   
        }
    });
});

Quelle: http://snipt.net/GerryEng/jquery-making-textfield-only-accept-numeric-values ​​

27
Ivar

Ich verwende dies in unserer internen allgemeinen js-Datei. Ich füge die Klasse einfach jeder Eingabe hinzu, die dieses Verhalten benötigt.

$(".numericOnly").keypress(function (e) {
    if (String.fromCharCode(e.keyCode).match(/[^0-9]/g)) return false;
});
27
Mike Chu

Einfacher ist für mich

jQuery('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});
25
Summved Jain

Warum so kompliziert? Sie benötigen nicht einmal jQuery, da es ein HTML5-Musterattribut gibt:

<input type="text" pattern="[0-9]*">

Das Coole daran ist, dass auf mobilen Geräten eine numerische Tastatur angezeigt wird.

20
guest

Sie können dasselbe mit dieser sehr einfachen Lösung tun

$("input.numbers").keypress(function(event) {
  return /\d/.test(String.fromCharCode(event.keyCode));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="numbers" name="field_name" />

Ich habe diesen Link für die Lösung genannt. Es funktioniert perfekt !!!

16
Ganesh Babu

Das Musterattribut in HTML5 gibt einen regulären Ausdruck an, gegen den der Wert des Elements geprüft wird.

  <input  type="text" pattern="[0-9]{1,3}" value="" />

Hinweis: Das Musterattribut funktioniert mit den folgenden Eingabetypen: Text, Suche, URL, Tel, E-Mail und Kennwort.

  • [0-9] kann durch eine beliebige Bedingung für reguläre Ausdrücke ersetzt werden.

  • {1,3} steht für mindestens 1 und maximal 3 Stellen. 

14
vickisys

Sie können die HTML5 number Eingabe ausprobieren:

<input type="number" value="0" min="0"> 

Für nicht kompatible Browser gibt es Modernizr und Webforms2 Fallbacks.

13

Etwas ziemlich einfaches mit jQuery.validate

$(document).ready(function() {
    $("#formID").validate({
        rules: {
            field_name: {
                numericOnly:true
            }
        }
    });
});

$.validator.addMethod('numericOnly', function (value) {
       return /^[0-9]+$/.test(value);
}, 'Please only enter numeric values (0-9)');
11
Adrian

function suppressNonNumericInput (event) {

    if( !(event.keyCode == 8                                // backspace
        || event.keyCode == 46                              // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
}
8
user261922

Ich bin zu einer sehr guten und einfachen Lösung gekommen, die den Benutzer nicht daran hindert, Text auszuwählen oder das Einfügen von Text wie bei anderen Lösungen vorzunehmen. jQuery-Stil :)

$("input.inputPhone").keyup(function() {
    var jThis=$(this);
    var notNumber=new RegExp("[^0-9]","g");
    var val=jThis.val();

    //Math before replacing to prevent losing keyboard selection 
    if(val.match(notNumber))
    { jThis.val(val.replace(notNumber,"")); }
}).keyup(); //Trigger on page load to sanitize values set by server
8
Vincent

Sie können diese JavaScript-Funktion verwenden:

function maskInput(e) {
    //check if we have "e" or "window.event" and use them as "event"
        //Firefox doesn't have window.event 
    var event = e || window.event 

    var key_code = event.keyCode;
    var oElement = e ? e.target : window.event.srcElement;
    if (!event.shiftKey && !event.ctrlKey && !event.altKey) {
        if ((key_code > 47 && key_code < 58) ||
            (key_code > 95 && key_code < 106)) {

            if (key_code > 95)
                 key_code -= (95-47);
            oElement.value = oElement.value;
        } else if(key_code == 8) {
            oElement.value = oElement.value;
        } else if(key_code != 9) {
            event.returnValue = false;
        }
    }
}

Und Sie können es wie folgt an Ihr Textfeld binden:

$(document).ready(function() {
    $('#myTextbox').keydown(maskInput);
});

Ich verwende das Obige in der Produktion, und es funktioniert perfekt und es ist Cross-Browser. Außerdem ist es nicht von jQuery abhängig, sodass Sie es mit Inline-JavaScript an Ihr Textfeld binden können:

<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>
8
karim79

Ich denke, es wird allen helfen

  $('input.valid-number').bind('keypress', function(e) { 
return ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) ? false : true ;
  })
7
Asif

Hier ist eine schnelle Lösung, die ich vor einiger Zeit erstellt habe. Mehr dazu lesen Sie in meinem Artikel: 

http://ajax911.com/numbers-numeric-field-jquery/

$("#textfield").bind("keyup paste", function(){
    setTimeout(jQuery.proxy(function() {
        this.val(this.val().replace(/[^0-9]/g, ''));
    }, $(this)), 0);
});
6
Dima

Das scheint unzerstörbar zu sein.

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9\.]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});
6
Jonathan

Hier ist eine Antwort, die jQuery UI Widget Factory verwendet. Sie können leicht anpassen, welche Zeichen zulässig sind.

$('input').numberOnly({
    valid: "0123456789+-.$,"
});

Das würde Zahlen, Nummernzeichen und Dollarbeträge erlauben.

$.widget('themex.numberOnly', {
    options: {
        valid : "0123456789",
        allow : [46,8,9,27,13,35,39],
        ctrl : [65],
        alt : [],
        extra : []
    },
    _create: function() {
        var self = this;

        self.element.keypress(function(event){
            if(self._codeInArray(event,self.options.allow) || self._codeInArray(event,self.options.extra))
            {
                return;
            }
            if(event.ctrlKey && self._codeInArray(event,self.options.ctrl))
            {
                return;
            }
            if(event.altKey && self._codeInArray(event,self.options.alt))
            {
                return;
            }
            if(!event.shiftKey && !event.altKey && !event.ctrlKey)
            {
                if(self.options.valid.indexOf(String.fromCharCode(event.keyCode)) != -1)
                {
                    return;
                }
            }
            event.preventDefault(); 
        });
    },

    _codeInArray : function(event,codes) {
        for(code in codes)
        {
            if(event.keyCode == codes[code])
            {
                return true;
            }
        }
        return false;
    }
});
6
cgTag

Ich schrieb meine auf der Grundlage von @ user261922s Beitrag oben, etwas modifiziert, so dass Sie alle auswählen und mehrere "Nur-Zahlen" -Felder auf derselben Seite bearbeiten können. 

var prevKey = -1, prevControl = '';
$(document).ready(function () {
    $(".OnlyNumbers").keydown(function (event) {
        if (!(event.keyCode == 8                                // backspace
            || event.keyCode == 9                               // tab
            || event.keyCode == 17                              // ctrl
            || event.keyCode == 46                              // delete
            || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
            || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
            || (event.keyCode >= 96 && event.keyCode <= 105)    // number on keypad
            || (event.keyCode == 65 && prevKey == 17 && prevControl == event.currentTarget.id))          // ctrl + a, on same control
        ) {
            event.preventDefault();     // Prevent character input
        }
        else {
            prevKey = event.keyCode;
            prevControl = event.currentTarget.id;
        }
    });
});
6
jamesbar2

Sie können die Eingabe der HTML5-Nummer versuchen:

<input type="number" placeholder="enter the number" min="0" max="9">

Dieses Eingabe-Tag-Element würde jetzt nur Werte zwischen 0 und 9 annehmen. Das minimale Attribut ist auf 0 und das maximale Attribut auf 9 gesetzt. 

weitere Informationen finden Sie unter http://www.w3schools.com/html/html_form_input_types.asp

5
kkk

Ich wollte ein wenig helfen und habe meine Version, die onlyNumbers-Funktion, erstellt ...

function onlyNumbers(e){
    var keynum;
    var keychar;

    if(window.event){  //IE
        keynum = e.keyCode;
    }
    if(e.which){ //Netscape/Firefox/Opera
        keynum = e.which;
    }
    if((keynum == 8 || keynum == 9 || keynum == 46 || (keynum >= 35 && keynum <= 40) ||
       (event.keyCode >= 96 && event.keyCode <= 105)))return true;

    if(keynum == 110 || keynum == 190){
        var checkdot=document.getElementById('price').value;
        var i=0;
        for(i=0;i<checkdot.length;i++){
            if(checkdot[i]=='.')return false;
        }
        if(checkdot.length==0)document.getElementById('price').value='0';
        return true;
    }
    keychar = String.fromCharCode(keynum);

    return !isNaN(keychar);
}

Fügen Sie einfach im Eingabe-Tag "... input ... id =" price "onkeydown =" nur zurück

5
crash

Ein einfacher Weg, um zu überprüfen, ob der eingegebene Wert numerisch ist, ist:

var checknumber = $('#textbox_id').val();

    if(jQuery.isNumeric(checknumber) == false){
        alert('Please enter numeric value');
        $('#special_price').focus();
        return;
    }
5

Sie möchten Tab zulassen:

$("#txtboxToFilter").keydown(function(event) {
    // Allow only backspace and delete
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ) {
        // let it happen, don't do anything
    }
    else {
        // Ensure that it is a number and stop the keypress
        if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});
5
ngwanevic

Ich würde auch gerne antworten :)

    $('.justNum').keydown(function(event){
        var kc, num, rt = false;
        kc = event.keyCode;
        if(kc == 8 || ((kc > 47 && kc < 58) || (kc > 95 && kc < 106))) rt = true;
        return rt;
    })
    .bind('blur', function(){
        num = parseInt($(this).val());
        num = isNaN(num) ? '' : num;
        if(num && num < 0) num = num*-1;
        $(this).val(num);
    });

Das ist es ... nur Zahlen. :) Fast kann es nur mit der "Unschärfe" funktionieren, aber ...

5
Pedro Soares

Sie müssen diese Methode nur in Jquery anwenden und Sie können Ihr Textfeld dahingehend überprüfen, dass nur die Zahl akzeptiert wird.

function IsNumberKeyWithoutDecimal(element) {    
var value = $(element).val();
var regExp = "^\\d+$";
return value.match(regExp); 
}

Versuchen Sie diese Lösung hier

5
Jitender Kumar

Stellen Sie sicher, dass der Ziffernblock und die Tabulatortaste ebenfalls funktionieren

 // Allow only backspace and delete
            if (event.keyCode == 46 || event.keyCode == 8  || event.keyCode == 9) {
                // let it happen, don't do anything
            }
            else {
                // Ensure that it is a number and stop the keypress
                if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105)) {

                }
                else {
                    event.preventDefault();
                }
            }
4
Coppermill

Es gibt ein unglaubliches Kompatibilitätsproblem bei der Verwendung von Tastatureingaben, um das gedrückte Zeichen zu erkennen ... siehe quirksmode , um mehr darüber zu erfahren.

Ich würde vorschlagen, keyup zum Erstellen Ihres Filters zu verwenden, da Sie dann die $ (element) .val () - Methode haben, mit der Sie tatsächliche Universalzeichen auswerten können.

Dann können Sie NON-Ziffern mit einem regulären Ausdruck wie:

ersetze (/ [^ 0-9]/g, '');

Dies kümmert sich um alle Probleme wie das Verschieben und Einfügen von Problemen, da immer ein Keyup vorhanden ist und der Wert immer ausgewertet wird (es sei denn, Javascript ist deaktiviert).

Also ... um daraus JQuery zu machen ... Hier ist ein kleines unfertiges Plugin, das ich schreibe, es wird als Eingabemaske bezeichnet und wird mehr Masken unterstützen, wenn es fertig ist. Für jetzt hat die Ziffernmaske funktioniert.

Hier kommt's...

/**
 * @author Tom Van Schoor
 * @company Tutuka Software
 */
(function($) {
  /**
   * @param {Object}
   * $$options options to override settings
   */
  jQuery.fn.inputmask = function($$options) {
    var $settings = $.extend( {}, $.fn.inputmask.defaults, $$options);

    return this.each(function() {
      // $this is an instance of the element you call the plug-in on
      var $this = $(this);

      /*
       * This plug-in does not depend on the metadata plug-in, but if this
       * plug-in detects the existence of the metadata plug-in it will
       * override options with the metadata provided by that plug-in. Look at
       * the metadata plug-in for more information.
       */
      // o will contain your defaults, overruled by $$options,
      // overruled by the meta-data
      var o = $.metadata ? $.extend( {}, $settings, $this.metadata()) : $settings;

      /*
       * if digits is in the array 'validators' provided by the options,
       * stack this event handler
       */
      if($.inArray('digits', o.validators) != -1) {
        $this.keyup(function(e) {
          $this.val(stripAlphaChars($this.val()));
        });
      }

      /*
       * There is no such things as public methods in jQuery plug-ins since
       * there is no console to perform commands from a client side point of
       * view. Typically only private methods will be fired by registered
       * events as on-click, on-drag, etc... Those registered events could be
       * seen as public methods.
       */

      // private method
      var stripAlphaChars = function(string) {
        var str = new String(string); 
        str = str.replace(/[^0-9]/g, ''); 
        return str;
      }

    });
  };

  // static public functions
  //jQuery.fn.inputmask.doSomething = function(attr) {

  //};

  // static public members
  //jQuery.fn.inputmask.someStaticPublicMember;

  // some default settings that can be overridden by either $$options or
  // metadata
  // If you need callback functions for the plug-in, this is where they get
  // set
  jQuery.fn.inputmask.defaults = {
    validators : []
  };
})(jQuery);

Um es zu benutzen, mach einfach:

$('#someElementId').inputmask({
  validators: ['digits','someOtherNotYetImplementedValidator']
});

Der 'someOtherNotYetImplementedValidator' zeigt nur, wie dies für zusätzliche zukünftige Masken/Validatoren erweitert werden kann. Sie können es hinzufügen oder weglassen, es bricht nichts ;-)

Ich benutze eine Vorlage, die ich für die Jungs hier bei der Arbeit erstellt habe.

Ich hoffe, das hilft.

4
Tom Van Schoor

So geht es mit regulärem Ausdruck:

$('input').bind('keypress', function (event) {
var regex = new RegExp("^[0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
   event.preventDefault();
   return false;
}

});

https://jsfiddle.net/astrapi69/qbk2vjty/1/

Sie können den regulären Ausdruck in etwas anderes ändern, wenn Sie andere Zeichen als Zahlen einschränken möchten.

3
Asterios Raptis

Aktualisierte Lösung für eine bessere Benutzererfahrung, die das Problem beim Kopieren + Einfügen behebt und das veraltete keyCode-Attribut ersetzt:

HTML

<input type="tel">

jQuery

$('[type=tel]').on('change', function(e) {
  $(e.target).val($(e.target).val().replace(/[^\d]/g, ''))
})
$('[type=tel]').on('keypress', function(e) {
  keys = ['0','1','2','3','4','5','6','7','8','9']
  return keys.indexOf(event.key) > -1
})

Einzelheiten:

Vor allem Eingabetypen:

number zeigt Aufwärts-/Abwärtspfeile, die den tatsächlichen Eingabebereich verkleinern. Ich finde sie hässlich und nur nützlich, wenn die Zahl eine Menge darstellt (Dinge wie Telefone, Vorwahlen, IDs ... brauchen sie nicht) tel liefert ähnliche Werte Browservalidierungen der Zahl ohne Pfeile

Die Verwendung von [Nummer/Tel] hilft auch bei der Anzeige der numerischen Tastatur auf mobilen Geräten.

Für die JS-Validierung benötigte ich schließlich zwei Funktionen, eine für die normale Benutzereingabe (Tastendruck) und die andere für eine Kopie + Einfügen-Korrektur (Änderung). Andere Kombinationen würden mir eine schreckliche Benutzererfahrung verschaffen.

Ich benutze zuverlässigerKeyboardEvent.key anstelle von jetzt nicht mehr unterstütztKeyboardEvent.charCode

Abhängig von der Browserunterstützung können Sie die Verwendung von Array.prototype.includes () anstelle des schlecht benannten Array.prototype.indexOf () (für true/false-Ergebnisse) in Betracht ziehen.

3
mencargo

Ich hatte ein Problem mit der Top-Antwort. Das numerische Tastenfeld ist nicht enthalten. Wenn Sie Shift + Nummer drücken, sollten die Sonderzeichen ebenfalls nicht angezeigt werden. Diese Lösung kümmert sich jedoch nicht darum.

Der beste Link, den ich in diesem Thread gefunden habe, war folgender: http://www.west-wind.com/weblog/posts/2011/Apr/22/Restricting-Input-in-HTML-Textboxes- in numerische Werte

Ich bin neu bei stackoverflow, daher weiß ich nicht, ob ich die bessere Lösung einfach in den Top-Post bearbeiten kann.

3
balrok

Um etwas mehr zu Antwort Nr. 3 zu erarbeiten, würde ich Folgendes tun (HINWEIS: noch keine Einfügeoperationen über Tastatur oder Maus):

$('#txtNumeric').keypress(
            function(event) {
                //Allow only backspace and delete
                if (event.keyCode != 46 && event.keyCode != 8) {
                    if (!parseInt(String.fromCharCode(event.which))) {
                        event.preventDefault();
                    }
                }
            }
        );
3
Damiano Fusco

Wenn Sie diakritische Zeichen und Sonderzeichen lösen müssen, versuchen Sie Folgendes: 

$(this).on( 'keypress', function( e )
{
    // Ensure that it is a number and stop the keypress
    if (e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) {
        e.preventDefault();
    }
});  
3
Novasol

Viele Leute hier verwenden keycode - Eigenschaft , die sich nicht leicht merken lässt. Wenn Sie keine Probleme mit dem Gebietsschema haben, können Sie einfach key verwenden. Dies ist eigentlich die Eingabe, die der Benutzer eingibt

Siehe dies Fiddle

$("#txt").on("keypress",function(e){
  console.log("Entered Key is " + e.key);
  switch (e.key)
     {
         case "1":
         case "2":
         case "3":
         case "4":
         case "5":
         case "6":
         case "7":
         case "8":
         case "9":
         case "0":
         case "Backspace":
             return true;
             break;

         case ".":
             if ($(this).val().indexOf(".") == -1) //Checking if it already contains decimal. You can Remove this condition if you do not want to include decimals in your input box.
             {
                 return true;
             }
             else
             {
                 return false;
             }
             break;

         default:
             return false;
     }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Enter Value
<input id="txt" type="text" />

ausgabe dann den folgenden einfachen Code. 

Bitte beachten Sie, dass dieses Beispiel auch eine Überprüfung für die Dezimaleingabe enthält. 

Da diese Frage nicht erforderlich ist, können Sie den Fall "." Einfach entfernen. Eingabe von Dezimalstellen entfernen.

2
vibs2006

Dieser jQuery-Code filtert die während der Eingabe eingegebenen Zeichen heraus ShiftCtrl oder Alt gehalten wird.

$('#AmountText').keydown(function (e) {
    if (e.shiftKey || e.ctrlKey || e.altKey) { // if shift, ctrl or alt keys held down
        e.preventDefault();         // Prevent character input
    } else {
        var n = e.keyCode;
        if (!((n == 8)              // backspace
        || (n == 46)                // delete
        || (n >= 35 && n <= 40)     // arrow keys/home/end
        || (n >= 48 && n <= 57)     // numbers on keyboard
        || (n >= 96 && n <= 105))   // number on keypad
        ) {
            e.preventDefault();     // Prevent character input
        }
    }
});
2
Patrick Coston

versuchen Sie es innerhalb von HTML-Code selbst wie onkeypress und onpast

<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" onpast="return false">
2
V J I

Sie können HTML5-Eingabetypnummer verwenden, um nur Zahleneinträge einzuschränken:

<input type="number" name="someid" />

Dies funktioniert nur im HTML5-Beschwerdebrowser. Stellen Sie sicher, dass der Doctype Ihres HTML-Dokuments lautet:

<!DOCTYPE html>

Für allgemeine Zwecke können Sie die JS-Validierung wie folgt durchführen:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="someid" name="number" onkeypress="return isNumberKey(event)"/>

Wenn Sie Dezimalzahlen zulassen möchten, ersetzen Sie die "if-Bedingung" durch Folgendes:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

Source:HTML-Texteingabe erlaubt nur numerische Eingabe

JSFiddle Demo:http://jsfiddle.net/Gagan_Gami/nSjy7/333/

2
Gagan Gami

Es ist vielleicht übertrieben für das, wonach Sie suchen, dennoch empfehle ich ein jQuery-Plugin namens autoNumeric () - es ist großartig! 

Sie können sich auf nur Zahlen, Dezimalgenauigkeit, Max/Min-Werte und mehr beschränken.

http://www.decorplanit.com/plugin/

2
Ryan Charmley

Deshalb habe ich kürzlich geschrieben, um dies zu erreichen. Ich weiß, dass dies bereits beantwortet wurde, aber ich lasse dies für spätere Zwecke.

Diese Methode erlaubt nur 0-9, sowohl Tastatur als auch Nummernblock, Rückbereiche, Tabulator, linke und rechte Pfeile (normale Formularoperationen)

$(".numbersonly-format").keydown(function (event) {
    // Prevent shift key since its not needed
    if (event.shiftKey == true) {
        event.preventDefault();
    }
    // Allow Only: keyboard 0-9, numpad 0-9, backspace, tab, left arrow, right arrow, delete
    if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46) {
        // Allow normal operation
    } else {
        // Prevent the rest
        event.preventDefault();
    }
});
2
SoN9ne

Sie können die HTML5-Validierung für Ihre Texteingaben verwenden, indem Sie ein Muster hinzufügen. Keine manuelle Überprüfung mit Regex oder KeyCodes erforderlich.

<input type="text" pattern="[0-9.]+" />

$("input[type=text][pattern]").on("input", function () {
    if (!this.checkValidity())
        this.value = this.value.slice(0, -1);
});

Möglich, aber nicht so einfach für Eingaben [Typ = Nummer] ...

Das Problem mit [type = "number"] besteht darin, dass wir das ungültige Zeichen nicht nur am Ende entfernen können. Die Benutzeragenten geben eine leere Zeichenfolge zurück, wenn die Eingabe ungültig ist. 

Aus der W3C-HTML5-Spezifikation:

Wenn der Wert des Elements keine gültige Gleitkommazahl ist, dann Setzen Sie ihn stattdessen auf die leere Zeichenfolge.

https://dev.w3.org/html5/spec-LC/number-state.html#number-state

Dies bedeutet, dass wir den vorherigen Eingabewert manuell speichern müssen. 

Für Zahleneingaben würde die Lösung also so aussehen:

$("input[type=number], input[type=text][pattern]").on("input", function () {
    if (!this.checkValidity())
        this.value = $(this).data("current-valid") || "";
    else
        $(this).data("current-valid", this.value);
});

Leider funktioniert dies nicht bei IE und Edge. Wir müssen für diese Browser auf die oben genannte Musterlösung zurückgreifen. Mit diesem einfachen Polyfill können Sie jedoch noch Zahleneingaben verwenden.

$("input[type=number]").attr("type", "text").attr("pattern", "[0-9.]+");
1
jBelanger
/**
Makes the textbox to accept only numeric input
*/

(function($) {
    $.fn.allowOnlyNumeric = function() {

        /**
        The interval code is commented as every 250 ms onchange of the textbox gets fired.
        */

        //  var createDelegate = function(context, method) {
        //      return function() { method.apply(context, arguments); };
        //  };

        /**
        Checks whether the key is only numeric.
        */
        var isValid = function(key) {
            var validChars = "0123456789";
            var validChar = validChars.indexOf(key) != -1;
            return validChar;
        };

        /**
        Fires the key down event to prevent the control and alt keys
        */
        var keydown = function(evt) {
            if (evt.ctrlKey || evt.altKey) {
                evt.preventDefault();
            }
        };

        /**
        Fires the key press of the text box   
        */
        var keypress = function(evt) {
            var scanCode;
            //scanCode = evt.which;
            if (evt.charCode) { //For ff
                scanCode = evt.charCode;
            }
            else { //For ie
                scanCode = evt.keyCode;
            }

            if (scanCode && scanCode >= 0x20 /* space */) {
                var c = String.fromCharCode(scanCode);
                if (!isValid(c)) {
                    evt.preventDefault();
                }
            }
        };

        /**
        Fires the lost focus event of the textbox   
        */
        var onchange = function() {
            var result = [];
            var enteredText = $(this).val();
            for (var i = 0; i < enteredText.length; i++) {
                var ch = enteredText.substring(i, i + 1);
                if (isValid(ch)) {
                    result.Push(ch);
                }
            }
            var resultString = result.join('');
            if (enteredText != resultString) {
                $(this).val(resultString);
            }

        };

        //var _filterInterval = 250;
        //var _intervalID = null;

        //var _intervalHandler = null;

        /**
        Dispose of the textbox to unbind the events.
        */
        this.dispose = function() {
            $(this).die('change', onchange);
            $(this).die('keypress', keypress);
            $(this).die('keydown', keydown);
            //window.clearInterval(_intervalHandler);
        };

        $(this).live('change', onchange);
        $(this).live('keypress', keypress);
        $(this).live('keydown', keydown);
        //_intervalHandler = createDelegate(this, onchange);
        //_intervalID = window.setInterval(_intervalHandler, _filterInterval);
    }
})(jQuery);

Das obige $ plugin wurde aus dem AjaxControlToolkit-Filter textbox extender.js geschrieben. 

Ein Verhalten, das nicht aus AjaxControlToolkit entlehnt ist, besteht jedoch darin, dass das onchange-Ereignis ausgelöst wird, wenn der Benutzer einen nicht-numerischen Wert kopiert und einfügt, und das Textfeld die Werte auffrisst. Ich ging den Code durch und fand heraus, dass dieser Wechsel alle 250 ms aufgerufen wurde, was ein Performance-Hit ist, und kommentierte diesen Teil.

1
dhinesh

fügen Sie den folgenden Code in document.ready hinzu

    $('.class of text box').keyup(function () 
    {
    this.value = this.value.replace(/[^0-9]/g, '');
    });  
1
rinuthomaz

In meinem Fall funktionierte keine der Antworten, daher habe ich die akzeptierte Antwort ein wenig geändert, damit sie für Dynamisch hinzugefügte Elemente funktioniert.

Genießen : 

var inputFilter = function (elem, cb) {
    /*
    *    /^-?\d*$/               restricts input to integer numbers
    *    /^\d*$/                 restricts input to unsigned integer numbers
    *    /^[0-9a-f]*$/i          restricts input to hexadecimal numbers
    *    /^-?\d*[.,]?\d*$/       restricts input to floating point numbers (allowing both . and , as decimal separator)
    *    /^-?\d*[.,]?\d{0,2}$/   restricts input to currency values (i.e. at most two decimal places)
    */
    bdy.on('input keydown keyup mousedown mouseup select contextmenu drop', elem, function () {
        if (cb(this.value)) {
            this.oldValue = this.value;
            this.oldSelectionStart = this.selectionStart;
            this.oldSelectionEnd = this.selectionEnd;
        } else if (this.hasOwnProperty('oldValue')) {
            this.value = this.oldValue;
            this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
        }
    });
};

Verwendungszweck :

inputFilter('#onlyDigitsInput', function (val) {
    return /^\d*$/.test(val);
});
0
Hooman

Ich empfehle, auch event.metaKey zu überprüfen. Wenn der Wert auf true gesetzt ist, führt der Benutzer möglicherweise etwas wie cmd-A aus, um den gesamten Text im Feld auszuwählen. Das solltest du auch zulassen.

0
Adriaan
$(document).on("keypress", ".classname", function(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
});
0
Inventor Bala

Die akzeptierte Antwort wurde überarbeitet, sodass Kommentare nicht mehr verwendet werden müssen, da ich Kommentare hasse. Auch dies lässt sich leichter mit Jasmin testen.

    allowBackspaceDeleteTabEscapeEnterPress: function(event){
    return ($.inArray(event.keyCode, [46, 8, 9, 27, 13, 190]) >= 0);
},
allowContorlAPress: function(event){
    return (event.keyCode == 65 && event.ctrlKey === true)
},
allowHomeEndLeftRightPress: function(event){
    return (event.keyCode >= 35 && event.keyCode <= 39)
},
theKeyPressedIsEditRelated: function (event) {
    return (this.allowBackspaceDeleteTabEscapeEnterPress(event)
            || this.allowContorlAPress(event)
            || this.allowHomeEndLeftRightPress(event));
},
isNotFromTheNumKeyPad: function (event) {
    return (event.keyCode < 96 || event.keyCode > 105);
},
isNotFromTopRowNumberKeys: function (event) {
    return (event.keyCode < 48 || event.keyCode > 57);
},
theKeyIsNonNumeric: function (event) {
   return (event.shiftKey
           || (this.isNotFromTopRowNumberKeys(event)
                && this.isNotFromTheNumKeyPad(event)));
},
bindInputValidator: function(){
    $('.myinputclassselector').keydown(function (event) {
        if(this.validateKeyPressEvent(event)) return false;
    });
},
validateKeyPressEvent: function(event){
    if(this.theKeyPressedIsEditRelated(event)){
        return;
    } else {
        if (this.theKeyIsNonNumeric(event)) {
            event.preventDefault();
        }
    }
}
0
branchgabriel

Dies ist, was ich verwende, um Zahleneingaben für Ganzzahl- oder Gleitkommawerte zu überprüfen (unauffälliger Stil mit jQuery):

$('input[name="number"]').keyup(function(e) {
    var float = parseFloat($(this).attr('data-float'));

    /* 2 regexp for validating integer and float inputs *****
        > integer_regexp : allow numbers, but do not allow leading zeros
        > float_regexp : allow numbers + only one dot sign (and only in the middle of the string), but do not allow leading zeros in the integer part
    *************************************************************************/
    var integer_regexp = (/[^0-9]|^0+(?!$)/g);
    var float_regexp = (/[^0-9\.]|^\.+(?!$)|^0+(?=[0-9]+)|\.(?=\.|.+\.)/g);

    var regexp = (float % 1 === 0) ? integer_regexp : float_regexp;
    if (regexp.test(this.value)) {
        this.value = this.value.replace(regexp, '');
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-float="1" id="number" name="number" placeholder="integer">
<input type="text" data-float="0.1" id="number" name="number" placeholder="float">

0
Ouatataz

Ein anderer Ansatz ist unten. Dies wird sich auch um das Einfügen kümmern. [ist für die alphanumerische Validierung]

//Input Validation
var existingLogDescription = "";

$('.logDescription').keydown(function (event) {
    existingLogDescription = this.value;

});


$('.logDescription').keyup(function () {
    if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
        alert("Log Description should contain alpha-numeric values only");
        this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, '');
        this.value = existingLogDescription;
    }
});
0
Lijo

fügen Sie eine Klasse in den Eingabetext ein und nennen Sie sie nur_Numbers

geben Sie den Jquery-Code in die Seite ein 

$(document).ready(function() {
    $('.only_numbers').keyup(function() {
        var numbers = $(this).val();
        $(this).val(numbers.replace(/\D/, ''));
    });
});

habe Spaß :-)

0
Ali Raza

Diese Antwort war perfekt, aber wir können sie sogar noch besser und leistungsfähiger machen, wenn sie mit dem jQuery.Validation-Plugin kombiniert wird.

Mit der number () -Methode können wir so etwas entwickeln: 

$('.numberOnly').keydown(function (event) { 
  if ((!event.shiftKey && !event.ctrlKey && !event.altKey) && 
    ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105))) 
  // 0-9 or numpad 0-9, disallow shift, ctrl, and alt 
  { 
    // check textbox value now and tab over if necessary 
  } 
  else if (event.keyCode != 8 && event.keyCode != 13 && event.keyCode != 46 && event.keyCode != 37 
    && event.keyCode != 39 && event.keyCode != 9 && event.keyCode != 109 
    && event.keyCode != 189 && event.keyCode != 110 && event.keyCode != 190) 
  // not backsapce (8), enter (13), del (46), left arrow (37), right arrow (39), tab (9), negetive sign (- : 109, 189), or point (. : 110, 190) 
  { 
    event.preventDefault(); 
  } 
  // else the key should be handled normally 
}); 
// _____________________________________________
jQuery.validator.setDefaults({ 
  debug: true, 
  success: "valid" 
}); 
// _____________________________________________
$(document).ready(function(){ 
  $('#myFormId').validate({ 
    rules: { 
      field: { 
        required: true, 
        number: true 
      } 
    } 
  }); 
}); 

Daher akzeptiert jedes Textfeld im Formular "#myFormId" mit der Klasse "numberOnly" nur Zahlen einschließlich Dezimalzahlen, Gleitkommazahlen und sogar negative Zahlen. Voila :)

PS: In meinem Fall habe ich aus irgendeinem Grund jQuery.validator.addMethod () anstelle von .validate () verwendet: 

jQuery.validator.addMethod("numberOnly", function (value, element) { 
var result = !isNaN(value); 
return this.optional(element) || result; 
}, jQuery.format("Please enter a valid number.")); 

(es funktioniert gut in meinem ASP.NET MVC 3-Projekt + unauffällige JavaScript-Überprüfung, hooooooooray!) 

0
Tohid

Ich habe alle Antworten in einem zusammengefasst und folgenden Code erhalten:

jQuery('#input_id', function(e){
    // Allow: backspace, delete, tab, escape, enter
    if (jQuery.inArray(e.keyCode, [46, 8, 9, 27, 13, 110]) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode === 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        (e.keyCode === 67 && e.ctrlKey === true) ||
        // Allow: Ctrl+X
        (e.keyCode === 88 && e.ctrlKey === true) ||
        // Disallow several dots (allow 190 only if no dots found)
        (e.keyCode === 190 && jQuery(this).val().indexOf('.') == -1) ||
        // Bug in some Android devices where it is always 229
        (e.keyCode === 229) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 40)) {
        // let it happen, don't do anything
        return;
    }
    // Ensure that it is a number and stop the keypress
    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
        e.preventDefault();
    }
});

Zusätzlich sollte das Formular autocomplete="off" haben. Ohne diese Option können Probleme mit automatischen Vervollständigungsalgorithmen auf mobilen Geräten auftreten.

0
Valera Tumash

Prüfen Sie, ob der Dezimalpunkt bereits verwendet wurde: -

        // Stop: Multiple decimal points
        if((e.keyCode == 190 || e.keyCode == 110) && ((this.value).indexOf(".") >= 0))
            e.preventDefault(); 
0
buzzmonkey

Ich benutze in dieser Form. Scheint mir richtig zu erlauben, Schlüssel wie homeendshift und ctrl, mit dem Nachteil, dass der Benutzer Sonderzeichen drucken kann:

$("#busca_cep").keydown(function(event) {
    if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 13 || event.keyCode == 16 || event.keyCode == 36 || event.keyCode == 35) {
        if (event.keyCode == 13) {
            localiza_cep(this.value);
        }
    } else {
        if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault(); 
        }   
    }
});

Es gibt so viele gute Antworten, um dies mit Java Script oder jQuery hier zu tun.

Ich werde eine sehr einfache Möglichkeit hinzufügen, dies nur mit HTML5 zu archivieren.

<input type="number" name="quantity" min="0" max="9">

Verwenden Sie im Folgenden einfache jQuery, um nur numerische Zeichen in einer tetbox zuzulassen. Sie müssen nicht alle Sonderzeichen manuell filtern, so dass nicht die Gefahr besteht, dass ein Sonderzeichen ausgelassen wird. Dies erlaubt nur die Zahlen 0-9: (Platzieren Sie den Code unter dem Dokument bereit und ändern Sie den Klassennamen entsprechend dem Klassennamen Ihrer numerischen Textfelder.)

//Event of data being keyed in to textbox with class="numericField".
$(".numericField").keyup(function() {
    // Get the non Numeric char that was enetered
    var nonNumericChars = $(this).val().replace(/[0-9]/g, '');                                  
    // Now set the value in text box 
    $(this).val( $(this).val().replace(nonNumericChars, ''));    

});
0
Mrinal Jha
$(document).ready(function()
{
    $("#textBoxId").bind("change",checkInput);
});

function checkInput()
{
    // check if $('#textBoxId').val() is under your constraints
    // then change its value, removing the last character
    // since this event will be called each time you
    // type a character
}
0
Khaled.K

Probier diese

$('.plan_eff').keyup(function () {     
  this.value = this.value.replace(/[^1-9\.]/g,'');
});
0
Rax Shah
function validate_profile(frmid) {
    var form = $('#' + frmid);
    var error = $('.alert-danger', form);
    var success = $('.alert-success', form);
    form.validate({
        errorElement: 'span', //default input error message container
        errorClass: 'help-block', // default input error message class
        focusInvalid: true, // do not focus the last invalid input
        ignore: "",
        rules: {
            contact_no: {
                required: true,
                minlength: 10,
                maxlength: 10,
                number: true
            }, email_id: {
                required: true,
                email: true
            }
        },
        invalidHandler: function (event, validator) { //display error alert on form submit   
            success.hide();
            error.show();
            Metronic.scrollTo(error, -7000);
        },
        highlight: function (element) { // hightlight error inputs
            $(element)
                    .closest('.form-group').addClass('has-error'); // un set error class to the control group
            $(element)
                    .closest('.form-group').removeClass('has-success'); // set success class to the control group
        },
        unhighlight: function (element) { // revert the change done by hightlight
            $(element)
                    .closest('.form-group').removeClass('has-error'); // un set error class to the control group
            $(element)
                    .closest('.form-group').addClass('has-success'); // set success class to the control group
            error.hide();
        },
        success: function (label) {
            label.closest('.form-group').removeClass('has-error');
            label.closest('.form-group').addClass('has-success');
        },
        submitHandler: function (form) {
            success.show();
            error.hide();
            form.submit();
        }
    });
}
0
Ganga Reddy
jQuery("#no_of").keypress(function(event){
    //Allow only backspace and delete
    if (event.keyCode != 46 && event.keyCode != 8) {
        if (!parseInt(String.fromCharCode(event.which))) {
            event.preventDefault();
        }
    }
});

jQuery("#no_of").keyup(function(e){
    var temp_s= jQuery("#no_of").val();
    var multiply_val= temp_s*10;
    jQuery("#ex-r").html(multiply_val);
});
0
Nishant