快捷導(dǎo)航

vue實(shí)現(xiàn)輸入框只允許輸入數(shù)字

更新時(shí)間：2023年11月03日 15:21:41 作者：小李的代碼經(jīng)銷商

在vue項(xiàng)目中,輸入框只允許輸入數(shù)字,現(xiàn)將自己使用的一種方法記錄,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧

vue實(shí)現(xiàn)輸入框只允許輸入數(shù)字

在vue項(xiàng)目中，輸入框只允許輸入數(shù)字，現(xiàn)將自己使用的一種方法記錄，以供參考！

1、行內(nèi)插入 οninput="value=value.replace(/[^0-9.]/g,'')"

<el-input v-model.number="ruleForm.sort" placeholder="請(qǐng)輸入數(shù)字(限數(shù)字)" oninput="value=value.replace(/[^0-9.]/g,'')" />

2、使用 element-ui 的 InputNumber 計(jì)數(shù)器

<el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>

如果不需要控制按鈕，設(shè)置controls為false即可

VUE html里的文本框只允許輸入數(shù)字的兩種方法

方法一、input 事件 + 數(shù)字正則表達(dá)式

<template>
  <a-input v-model:value="num" @input="handInput" />
</template>
<script lang="ts">
  import { defineComponent, ref } from "vue";
  export default defineComponent({
    name: "OnlyNum",
    props: {},
    emits: [],
    setup() {
      const num = ref("");
      function handInput(e) {
        num.value = e.target.value.replace(/[^0-9]/g, "");
      }
      return { num, handInput };
    },
  });
</script>
<style scoped></style>

方法二、鍵盤按鍵事件 keydown

<template>
  <a-input v-model:value="num" @keydown="handKeydown" />
</template>
<script lang="ts">
  import { defineComponent, ref } from "vue";
  export default defineComponent({
    name: "OnlyNum",
    props: {},
    emits: [],
    setup() {
      const num = ref("");
      function handKeydown(e) {
        let _code = e.keyCode;
        // 只允許數(shù)字鍵和刪除鍵
        if ((_code >= 48 && _code <= 57) || _code === 8) {
        } else {
          e.preventDefault();
        }
      }
      return { num, handKeydown };
    },
  });
</script>
<style scoped></style>

到此這篇關(guān)于vue實(shí)現(xiàn)輸入框只允許輸入數(shù)字的文章就介紹到這了,更多相關(guān)vue輸入框只允許輸入數(shù)字內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

前端虛擬列表實(shí)現(xiàn)的思路及完整代碼
這篇文章主要介紹了前端虛擬列表實(shí)現(xiàn)的思路及完整代碼,虛擬列表是一種優(yōu)化長(zhǎng)列表性能的技術(shù),通過(guò)只渲染可視區(qū)域的列表項(xiàng)來(lái)提升頁(yè)面性能和用戶體驗(yàn),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-01-01
vue3使用pdf.js來(lái)預(yù)覽文件的操作步驟(本地文件測(cè)試)
這篇文章主要介紹了vue3使用pdf.js來(lái)預(yù)覽文件的操作步驟(本地文件測(cè)試),文中通過(guò)代碼示例和圖文結(jié)合的方式給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-05-05
Vue中之nextTick函數(shù)源碼分析詳解
這篇文章主要介紹了Vue中之nextTick函數(shù)源碼分析,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
element中的el-upload附件上傳與附件回顯
這篇文章主要介紹了element中的el-upload附件上傳與附件回顯方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue處理emoji表情占位符的操作方法
在計(jì)算字符數(shù)時(shí),一般情況下,英文字符、數(shù)字和大部分符號(hào)都可以被視為占一個(gè)字符長(zhǎng)度,因?yàn)樗鼈兪菃蝹€(gè)字節(jié),然而,對(duì)于某些特殊字符,如表情符號(hào)和部分非英文字符,會(huì)被認(rèn)為占據(jù)了多個(gè)字符長(zhǎng)度,本文給介紹了vue處理emoji表情占位符的操作方法,需要的朋友可以參考下
2024-06-06
vue3?組件與API直接使用的方法詳解(無(wú)需import)
這篇文章主要介紹了vue3?組件與API直接使用的方法(無(wú)需import)，主要包括vue3自動(dòng)導(dǎo)入和API的自動(dòng)引入問(wèn)題，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-09-09
詳解Vue中是如何實(shí)現(xiàn)cache緩存的
這篇文章分享一個(gè)比較有意思的東西，那就是Vue中如何實(shí)現(xiàn)cache緩存的，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-07-07
ant-design-vue中tree增刪改的操作方法
這篇文章主要介紹了ant-design-vue中tree增刪改的操作方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-11-11
Vue實(shí)現(xiàn)contenteditable元素雙向綁定的方法詳解
contenteditable是所有HTML元素都有的枚舉屬性，表示元素是否可以被用戶編輯。本文將詳細(xì)介紹如何實(shí)現(xiàn)contenteditable元素的雙向綁定，需要的可以參考一下
2022-05-05
Vue子組件關(guān)閉后調(diào)用刷新父組件的實(shí)現(xiàn)
這篇文章主要介紹了Vue子組件關(guān)閉后調(diào)用刷新父組件的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03