Garth

Jak v inputu oddělovat při psaní čísel řády?

Jistě se Vám již stalo, že na webu píšete do inputu částku 1000000 a zpětně dumáte, zda Vám tam nechybí jedna 0 či naopak nepřibívá. Bylo by skvělé psát 1 000 000, ale pak zase při ukládání do databáze musíte vyrušit ty mezery. S touto situací pomůže Javascript respektive jQuery.

Kód zní:
  /* doplneni tecek za tisice v inputech */
    //krok 1 - Vynut, aby uzivatel psal jen cisla.
    $(".input_cislo").keydown(function (e) {
       // Allow: backspace, delete, tab, escape, enter and .
      if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
        // Allow: Ctrl+A, Command+A ; delete - 46 , backspace - 8
       (e.keyCode == 65 && ( e.ctrlKey === true || e.metaKey === true ) ) || 
        // Allow: home, end, left, right, down, up
       (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();
      }
    });
    //krok 2 doplni mezeru za tisice (zdroj: http://blog.tompawlak.org/number-currency-formatting-javascript )
    $(".input_cislo").keyup(function (e) {
      var bez_mezer = $( this ).val().replace(/[ ]/g, ""); //mezery vracim do cisla, aby po dalsim kliku fungovalo to doplneni mezer dobre
      $( this ).val( bez_mezer );
      var hodnota = $( this ).val();
      var s_mezerami = hodnota.replace(/(d)(?=(d{3})+(?!d))/g, "$1 "); //ta mezera za $1 je oddelovac
      $( this ).val( s_mezerami );
    });
Pokud máte tento kód, tak již stačí pouze přidat třídu "input_cislo" k požadovanému inputu a to například takto:


<< zpět




Nejnovější články

Jak udělat stín bloku pouze na jedné straně?

CSS - Úvod do CSS

Jak detekovat klik na tlačítka myšy?

JavaScript - Úvod do JavaScriptu

Jak udělat odkaz na celý řádek tabulky?

JavaScript - Příklady v JavaScriptu

Jak zrušit tečky kolem odkazu?

CSS - Základy CSS

Jak fungují lomítka a tečky v url adrese?

(x) HTML - Úvod do HTML