2012-04-14 14 views
7

Mam czas bólu podczas wprowadzania danych, który zezwala tylko na liczbę zmiennoprzecinkową z biblioteką jquery. mój kod nie może zapobiec chacacter "." kiedy staje się pierwszym źródłem informacji, czy ktoś może mnie poprowadzić, aby rozwiązać ten problem?zezwalanie na wprowadzanie tylko dla liczby zmiennoprzecinkowej

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

Odpowiedz

7

Filtrować wejście pierwszej pozycji za pomocą wtyczki jQuery Caret. W przeciwnym razie po wpisaniu kropki jest już za późno, by sprawdzić, gdzie została umieszczona. Próbowałem sprawdzić kropkę, a następnie usunąć kropkę, ale nie wygląda to ładnie.

jQuery plugin daszek: http://examplet.buss.hk/js/jquery.caret.min.js

Co zrobiłem:

http://jsfiddle.net/FCWrE/422/

Spróbuj :)

$('.filterme').keypress(function(eve) { 
 
    if ((eve.which != 46 || $(this).val().indexOf('.') != -1) && (eve.which < 48 || eve.which > 57) || (eve.which == 46 && $(this).caret().start == 0)) { 
 
    eve.preventDefault(); 
 
    } 
 

 
    // this part is when left part of number is deleted and leaves a . in the leftmost position. For example, 33.25, then 33 is deleted 
 
    $('.filterme').keyup(function(eve) { 
 
    if ($(this).val().indexOf('.') == 0) { 
 
     $(this).val($(this).val().substring(1)); 
 
    } 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/caret/1.0.0/jquery.caret.min.js"></script> 
 
<input type="text" class="filterme">

+0

dzięki, to przyjaciel – moc4yu

+0

pracy zapraszamy :) –

+1

zrobiłem zmianę, dodać '$ (this) .caret (0,0) ; 'na końcu. Zauważyłem, że po usunięciu kropki karetka przesuwa się w prawo niespodziewanie. –

1

Dlaczego nie używając Regular Expression

^[0-9]*[.][0-9]+$ 

Read code and test here..

+1

Chcę uniemożliwić użytkownikowi na wprowadzanie złym charakterem na początku, a nie na walidacji – moc4yu

3

wyrażenie regularne będzie moją rekomendację, jak również. Jeśli wartość jest przekazywana jako liczba, a nie ciąg, możesz użyć .toString, aby zmienić ją na ciąg i zweryfikować go za pomocą wyrażenia regularnego. Na przykład:

var str = value.toString(); 
if(!str.match(/^-?[0-9]*[.][0-9]+$/)) { 
    alert("Value must be a float number"); 
    return; 
} 
return value; 

Powyższe wyrażenie dopasuje się, jeśli przekazana wartość jest liczbą zmiennoprzecinkową. Akceptuje zarówno liczby ujemne, jak i dodatnie. Jeśli chcesz tylko akceptować liczby dodatnie, po prostu usuń "-?" od wyrażenia. To również się nie powiedzie, jeśli wartość jest po prostu zero "0" bez kropki dziesiętnej. Jeśli chcesz zaakceptować zero, po prostu dodaj je jako warunek do instrukcji "if".

Możesz użyć powyższego sprawdzania poprawności i zdarzenia zmiany, aby uniemożliwić użytkownikowi wprowadzenie numeru niezabudka.

12

Używam tego - działa na dane z klawiatury lub skopiuj i wklej

$('input.float').on('input', function() { 
 
    this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1'); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<input type="text" class="float" />

wyjaśnienie:

  • Pierwszy regex zastępuje niczego, co nie jest liczbą lub dziesiętny.
  • Drugie wyrażenie regularne usuwa dowolne wystąpienie drugiego miejsca po przecinku.
+0

Bardzo dobrze, jedyny problem polega na tym, że użytkownik może wstawiać wiele kropek – Sertage

+0

@ Sirtage - nie dla mnie Jakiej przeglądarki używasz? Czy rzeczywiście można było wpisać wiele kropek w powyższym fragmencie? – billynoah

+0

Myślę, że to był błąd w mojej przeglądarce, dzisiaj działa: S. Używam Firefoksa 49.0.1 – Sertage

0

Oto moje rozwiązanie, współpracuje z liczb ujemnych też (fiddle)

$("input").keypress(function (event) { 
    var inputCode = event.which; 
    var currentValue = $(this).val(); 
    if (inputCode > 0 && (inputCode < 48 || inputCode > 57)) { 
     if (inputCode == 46) { 
      if (getCursorPosition(this) == 0 && currentValue.charAt(0) == '-') return false; 
      if (currentValue.match(/[.]/)) return false; 
     } 
     else if (inputCode == 45) { 
      if (currentValue.charAt(0) == '-') return false; 
      if (getCursorPosition(this) != 0) return false; 
     } 
     else if (inputCode == 8) return true; 
     else return false; 

    } 
    else if (inputCode > 0 && (inputCode >= 48 && inputCode <= 57)) { 
     if (currentValue.charAt(0) == '-' && getCursorPosition(this) == 0) return false; 
    } 
}); 
function getCursorPosition(element) { 
    if (element.selectionStart) return element.selectionStart; 
    else if (document.selection) 
    { 
     element.focus(); 
     var r = document.selection.createRange(); 
     if (r == null) return 0; 

     var re = element.createTextRange(), 
      rc = re.duplicate(); 
     re.moveToBookmark(r.getBookmark()); 
     rc.setEndPoint('EndToStart', re); 
     return rc.text.length; 
    } 
    return 0; 
} 
0

Można użyć następującą metodę, zwaną na onkeypress imprezy.Poniżej znajduje się kod HTML, a następnie metodą JS:

typu wejściowy "text" onkeypress = "powrót isNumberKey (zdarzenia)" id = "podłoga"

function isNumberKey(evt){ 
    var charCode = (evt.which) ? evt.which : event.keyCode 
    if (charCode == 46){ 
     var inputValue = $("#floor").val(); 
     var count = (inputValue.match(/'.'/g) || []).length; 
     if(count<1){ 
      if (inputValue.indexOf('.') < 1){ 
       return true; 
      } 
      return false; 
     }else{ 
      return false; 
     } 
    } 
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)){ 
     return false; 
    } 
    return true; 
} 

Uwaga: Powyższe Kod zapewnia również, że wprowadzasz tylko jeden dziesiętny w danych wejściowych.

Powiązane problemy