6080无码久久国产,韩国一区二区三区视频在线播放,99久久综合狠狠综合久久一区

技術頻道 - js技術

jQuery實現(xiàn)——文本框僅能輸入數(shù)字和小數(shù)值

作者:admin 時間:2019-4-28 18:20:4 瀏覽:

這篇文章解釋了如何在客戶端使用jquery實現(xiàn)文本框中只允許輸入數(shù)字和小數(shù)值。換句話說，如何限制用戶在文本框或輸入控件中僅輸入數(shù)字（0到9）值和小數(shù)點。

在互聯(lián)網(wǎng)上我發(fā)現(xiàn)了一些例子，比如使用Keypress，Keyup和Keydown事件，它是有效的，但是有一個問題，如果用戶沒有按任何鍵并使用鼠標直接拖放值時，則會出現(xiàn)問題。

所以今天我們學習如何限制用戶在文本框字段中只能輸入數(shù)值，也允許十進制值例如（只允許使用一個點），而不管是否用戶拖放，刪除，復制，粘貼或手動輸入。

文本框僅能輸入數(shù)字和小數(shù)值

讓我們前往編碼部分。

僅允許數(shù)字和點（十進制/浮點數(shù)）的步驟

下載包括jquery庫。
HTML標記：添加文本框。
jquery：允許數(shù)字和小數(shù)值的代碼

下載并導入jQuery庫。

在編寫任何代碼之前，首先，我們將下載并將最新的jQuery文件添加到我們的網(wǎng)頁中。您可以在服務器上托管jQuery文件，也可以直接使用第三方托管的jQuery庫（如百度）。

HTML標記：添加兩個文本框以進行驗證

這里我們在網(wǎng)頁中添加兩個文本框進行驗證。在第一個文本框中將只允許整數(shù)值。在第二個文本框中將允許輸入數(shù)字和小數(shù)值。 HTML如下所示：

<table>
<tr>
<td><strong>整數(shù)值:</strong></td>
<td>
<input type="text" name="numeric" class='allow_numeric'>
<div>只能輸入數(shù)字（0-9）</div>
</td>
</tr>
<tr>
<td> <strong>十進制值：</strong></td>
<td>
<input type="text" name="numeric" class='allow_decimal'>
<div>只允許輸入數(shù)值</div>
</td>
</tr>
</table>

Jquery：僅允許數(shù)值的代碼。

在我們的第一個文本框中，我們添加了一個名為allow_numeric的類。在其輸入事件上將僅限制數(shù)字字符。

$(".allow_numeric").on("input", function(evt) {
var self = $(this);
self.val(self.val().replace(/[^\d].+/, ""));
if ((evt.which < 48 || evt.which > 57))
{
evt.preventDefault();
}
});

注意：IE版本<9不支持這個jquery輸入事件。但舊的IE版本有自己的事件，即onpropertychange與oninput相同。輸入更改時出發(fā)輸入事件。

Jquery：允許文本框輸入數(shù)字和小數(shù)值的代碼

在我們的第二個文本框中，我們添加了allow_decimal類，并且在其事件中將允許用戶輸入十進制值。使用以下jquery代碼將允許用戶在文本框中輸入一個點字符。這樣用戶就可以在文本框中輸入小數(shù)值。

$(".allow_decimal").on("input", function(evt) {
var self = $(this);
self.val(self.val().replace(/[^0-9\.]/g, ''));
if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57))
{
evt.preventDefault();
}
});

輸出：數(shù)字驗證客戶端

文本框僅能輸入數(shù)字和小數(shù)值

execcode getcode

結論：在這里我們解釋了如何在客戶端使用jquery限制用戶在文本框中只能輸入數(shù)字或小數(shù)值。