Kā HTML ievades lodziņā ļaut ievadīt tikai ciparus (0-9), izmantojot jQuery?

Es veidoju tīmekļa lapu, kurā man ir ievades teksta lauks, kurā es gribu atļaut tikai ciparu rakstzīmes, piemēram, (0,1,2,3,4,5...9) 0-9.

Kā to izdarīt, izmantojot jQuery?

Nayish
Rediģēts jautājums 3pēcpusdienari5t septembrī 2011 в 10:13
Programmēšana
html jquery validation numeric
15priekšpusdienari0t jūnijā 2009 в 9:22
7 skati
Risinājums

Piezīme: Šī ir atjaunināta atbilde. Zemāk minētie komentāri attiecas uz veco versiju, kurā bija neskaidrības ar atslēgu kodiem.

jQuery

Pamēģiniet paši [JSFiddle][1].

Šim nolūkam nav dzimtās jQuery implementācijas, bet jūs varat filtrēt teksta <input> ievades vērtības, izmantojot šādu inputFilter spraudni (atbalsta Copy+Paste, Drag+Drop, tastatūras īsceļus, konteksta izvēlnes operācijas, neievadāmos taustiņus, caret pozīciju, dažādus tastatūras izkārtojumus un [visas pārlūkprogrammas kopš IE 9][2]):

// Restricts input for the set of matched elements to the given inputFilter function.
(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));

Tagad varat izmantot inputFilter spraudni, lai instalētu ievades filtru:

$(document).ready(function() {
  $("#myTextBox").inputFilter(function(value) {
    return /^\d*$/.test(value);    // Allow digits only, using a RegExp
  });
});

Šeit ir vēl daži ievades filtru piemēri, kas varētu būt noderīgi:


return /^-?\d*$/.test(value);                // Integer
return /^\d*$/.test(value);                  // Integer >= 0
return /^\d*$/.test(value) &&                // Integer >= 0 and
emkey08
Rediģēta atbilde 11priekšpusdienari0t novembrī 2019 в 10:10
Komentāri (30)
 
$(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(); 
            }   
        }
    });
});

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

Komentāri (4)

Varat izmantot šo JavaScript funkciju:

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;
        }
    }
}

Un jūs varat saistīt to ar savu teksta lodziņu šādi:

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

Es izmantoju iepriekš minēto, un tas darbojas perfekti, un tas ir piemērots dažādiem pārlūkiem. Turklāt tas nav atkarīgs no jQuery, tāpēc varat to saistīt ar teksta lodziņu, izmantojot iebūvētu JavaScript:

<input type="text" name="aNumberField" onkeydown="javascript:maskInput()"/>
Community
Rediģēta atbilde 19pēcpusdienari1t novembrī 2013 в 11:59
Komentāri (1)