JS控制只能輸入數(shù)字并且最多允許小數(shù)點(diǎn)兩位

更新時(shí)間：2019年11月24日 10:42:21 作者：子欽加油

這篇文章主要介紹了JS控制只能輸入數(shù)字并且最多允許小數(shù)點(diǎn)兩位,本文給大家提到j(luò)s如何限制input輸入框只能輸入數(shù)字問(wèn)題，需要的朋友可以參考下

下面通過(guò)一段代碼給大家介紹JS控制只能輸入數(shù)字并且最多允許小數(shù)點(diǎn)兩位，具體代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<input type="text" name="je" onblur="clearNoNum(this)"/>元
<script type="text/javascript">
  function clearNoNum(obj) {
    obj.value = obj.value.replace(/[^\d.]/g, ""); //清除“數(shù)字”和“.”以外的字符
    obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一個(gè). 清除多余的
    obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能輸入兩個(gè)小數(shù)
    if (obj.value.indexOf(".") < 0 && obj.value != "") {//以上已經(jīng)過(guò)濾，此處控制的是如果沒(méi)有小數(shù)點(diǎn)，首位不能為類似于 01、02的金額
      obj.value = parseFloat(obj.value);
    }
    if (!obj.value || obj.value == '0' || obj.value == '0.0' || obj.value == '0.00') {
      alert('退款金額不能為空');
      return;
    }
    //  正常得話繼續(xù)調(diào)后端接口
  }
 
</script>
</body>
</html>

ps:js如何限制input輸入框只能輸入數(shù)字

代碼中我是這樣實(shí)現(xiàn)的：

<input type="text"
    class="form-control match-rotation-input"
    maxlength="3"
    οnkeyup="value=value.replace(/[^\d]/g,'')"http://輸入時(shí)校驗(yàn)    
    οnblur="value=value.replace(/[^\d]/g,'')"http://失去焦點(diǎn)時(shí)校驗(yàn)
    ng-model="schedule.round"
    placeholder="請(qǐng)輸入數(shù)字">

添加了一行οnkeyup="value=value.replace(/[^\d]/g,'')"

這里運(yùn)用了正則表達(dá)式來(lái)處理比較簡(jiǎn)單，然后添加提示語(yǔ)：placeholder="請(qǐng)輸入數(shù)字"。

但是為什么還要加οnblur="value=value.replace(/[^\d]/g,'')"這一行呢？

這是因?yàn)樵诓僮鞯倪^(guò)程中，會(huì)發(fā)現(xiàn)如果你一直常按著字母鍵，然后點(diǎn)擊鼠標(biāo)讓input失去焦點(diǎn)，

會(huì)導(dǎo)致在input框中出現(xiàn)字母，所以為了避免這個(gè)問(wèn)題，后面又加入了οnblur="value=value.replace(/[^\d]/g,'')"

注意：之前想過(guò)改type為：number類型但是出來(lái)的樣式不符合我們要的，所以采用了正則來(lái)匹配

總結(jié)

以上所述是小編給大家介紹的JS控制只能輸入數(shù)字并且最多允許小數(shù)點(diǎn)兩位的相關(guān)知識(shí)，希望對(duì)大家有所幫助！

您可能感興趣的文章: