2012-04-14 196 views
7

我有痛苦的時候做輸入,只允許浮點數與jQuery庫。我的代碼無法防止chacacter「。」當它成爲第一個輸入時,誰能指導我解決這個問題?只允許輸入浮點數

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

回答

7

我使用jQuery插件過濾第一個位置輸入。否則,一旦打印點,檢查放置位置已經晚了。我試圖檢查點,然後刪除點,但它看起來不太好。

的jQuery插件插入符號: http://examplet.buss.hk/js/jquery.caret.min.js

我做了什麼:

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

試試吧:)

$('.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

感謝,它的工作的朋友 – moc4yu 2012-04-14 04:51:05

+0

不客氣:) – 2012-04-14 04:53:03

+1

我做出了改變,加上'$(本).caret(0,0) ;'在最後。我注意到,點被刪除後,插入符號意外移動到右側。 – 2012-04-14 05:00:39

1

爲什麼不使用Regular Expression

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

Read code and test here..

+1

我想防止用戶輸入錯誤的字符開頭,而不是在驗證 – moc4yu 2012-04-14 04:24:54

3

正則表達式將是我的建議爲好。如果該值是作爲數字而不是字符串傳遞的,則可以使用.toString將其更改爲字符串並使用正則表達式對其進行驗證。例如:

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

如果傳遞的值是浮點數,上述正則表達式將匹配。它接受負數和正數。如果你只想接受正數,只需刪除' - ?'從表達。如果數值僅爲0而沒有任何小數點,它也會失敗。如果你想接受零,只需將它作爲條件添加到'if'語句。

您可以使用上述驗證和onchange事件來防止用戶輸入非填充數字。

12

我用這個 - 適用於鍵盤輸入或複製並粘貼

$('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" />

說明:

  • 一正則表達式替換任何東西,這不是一個數字或小數。
  • 第二個正則表達式刪除第二個小數的任何實例。
+0

非常好,唯一的問題是允許用戶插入多個點。 – Sertage 2016-10-03 17:08:44

+0

@Sertage - 不適用於我。您使用的是什麼瀏覽器?您是否真的能夠在上面的代碼段中輸入多個點? – billynoah 2016-10-03 17:16:54

+0

我認爲這是一個在我的瀏覽器中的錯誤,今天它正在工作:S。我使用Firefox 49.0.1 – Sertage 2016-10-04 11:21:07

0

這裏是我的解決方案,以負數太(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

您可以使用下面的方法,呼籲onkeypress事件事件的作品。下面是HTML片段隨後JS方法:

INPUT TYPE = 「文本」 onkeypress事件 = 「返回isNumberKey(事件)」 ID = 「地板」

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

:上述代碼還可確保在輸入中只輸入一位小數。