溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2021-09-01 14:03:43 來(lái)源：億速云 閱讀：161 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹JS如何控制只能輸入數(shù)字并且最多允許小數(shù)點(diǎn)兩位，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

具體代碼如下所示：

<!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)，首位不能為類(lèi)似于 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,'')"//輸入時(shí)校驗(yàn)    
    οnblur="value=value.replace(/[^\d]/g,'')"//失去焦點(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)的樣式不符合我們要的，所以采用了正則來(lái)匹配

以上是“JS如何控制只能輸入數(shù)字并且最多允許小數(shù)點(diǎn)兩位”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

js
AI
助
手