適用于 vue2、vue3 的自定義指定:v-int(正整數)

在項目中,我們經常會遇到輸入框只允許輸入數字的情況,下面是一段自定義指定 代碼,復制到項目中,注冊指定即可使用

  • 用法如下:
  1. 創建一個IntInput.js 文件,將下面代碼復制到文件中保存
  2. 在項目中的 main.js 文件中導入創建的 IntInput.js 文件
  3. 注冊全局指令:app.directive(‘int’, IntInput) ,注冊后即可使用 v-int 綁定元素(兼容了大多數組件庫中輸入框組件)
    注意:以下代碼中的鉤子函數是 vue3 寫法,如需在 vue2 項目中使用,修改對應的鉤子函數即可(代碼中有注釋說明)
/*** 查找并返回元素內部的原生 <input> 節點。*/
function getInputElement(el) {if (el.tagName.toLowerCase() === 'input') {return el;}const input = el.querySelector('input');if (!input) {throw new Error('v-integer directive requires the element to contain an <input> tag.');}return input;
}/*** 將字符串中的全角數字轉換為半角數字。*/
function toHalfWidth(str) {return str.replace(/[\uff10-\uff19]/g, (char) => {return String.fromCharCode(char.charCodeAt(0) - 65248);});
}export default {/*** Vue 2: bind / Vue 3: mounted*/mounted(el) {const input = getInputElement(el);// ? 核心:引入一個狀態標志來跟蹤輸入法組合狀態el._v_integer_is_composing = false;const onCompositionStart = () => {el._v_integer_is_composing = true;};const onCompositionEnd = (event) => {// 組合結束后,標志位復原el._v_integer_is_composing = false;// ? 關鍵:手動觸發一次 input 事件(或直接調用處理函數)來執行清理// 使用 dispatchEvent 更符合事件流,并能被其他可能的監聽器捕獲event.target.dispatchEvent(new Event('input'));};// onKeydown 邏輯保持不變,用于攔截非組合狀態下的無效按鍵const onKeydown = (event) => {if (el._v_integer_is_composing) {return;}};const onInput = () => {// ? 關鍵:如果在組合狀態中,則不執行任何操作if (el._v_integer_is_composing) {return;}const originalValue = input.value;const normalizedValue = toHalfWidth(originalValue);const sanitizedValue = normalizedValue.replace(/[^\d]/g, '');if (originalValue !== sanitizedValue) {const selectionStart = input.selectionStart;const valueChange = originalValue.length - sanitizedValue.length;input.value = sanitizedValue;// 簡單恢復光標位置if (selectionStart) {input.selectionStart = input.selectionEnd = selectionStart - valueChange;}input.dispatchEvent(new Event('input', { bubbles: true }));}};// 存儲所有處理器以便解綁el._v_integer_handlers = {keydown: onKeydown,input: onInput,compositionstart: onCompositionStart,compositionend: onCompositionEnd,};// 綁定所有事件監聽器input.addEventListener('keydown', onKeydown);input.addEventListener('input', onInput);input.addEventListener('compositionstart', onCompositionStart);input.addEventListener('compositionend', onCompositionEnd);},/*** Vue 2: unbind / Vue 3: unmounted*/unmounted(el) {try {const input = getInputElement(el);if (el._v_integer_handlers) {input.removeEventListener('keydown', el._v_integer_handlers.keydown);input.removeEventListener('input', el._v_integer_handlers.input);input.removeEventListener('compositionstart', el._v_integer_handlers.compositionstart);input.removeEventListener('compositionend', el._v_integer_handlers.compositionend);delete el._v_integer_handlers;delete el._v_integer_is_composing;}} catch (e) {console.warn('Could not unbind v-integer listeners.', e);}}
};

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/913659.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/913659.shtml
英文地址,請注明出處:http://en.pswp.cn/news/913659.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

學習基于springboot秒殺系統-環境配置(接口封裝,mybatis,mysql,redis(Linux))

文章目錄前言創建springboot項目封裝controller層輸入輸出rest api 的json輸出返回頁面集成mybatis集成redis下載虛擬機和centos下載redis.tar.gz上傳redis.tar.gz 到虛擬機前言 今天開始記錄學習秒殺系統-課程是基于慕課上的搜索秒殺系統的課程&#xff0c;老師講解非常好。這…

stm32達到什么程度叫精通?

STM32達到什么程度叫精通&#xff1f;一個十年老兵的深度反思 前言&#xff1a;精通二字&#xff0c;重如泰山 每次有人問我"STM32達到什么程度叫精通"這個問題&#xff0c;我都會沉默很久。 不是因為這個問題難回答&#xff0c;而是因為"精通"這兩個字太重…

微軟上線Deep Research:OpenAI同款智能體,o3+必應雙王炸

今天凌晨&#xff0c;微軟在官網宣布&#xff0c;Azure AI Foundry中上線Deep Research公開預覽版。這是支持API和SDK的OpenAI 高級智能體研究能力產品&#xff0c;并且Azure 的企業級智能體平臺完全集成。Deep Research是OpenAI在今年4月25日發布的最新產品&#xff0c;能夠像…

Spring Batch終極指南:原理、實戰與性能優化

&#x1f31f; Spring Batch終極指南&#xff1a;原理、實戰與性能優化單機日處理10億數據&#xff1f;揭秘企業級批處理架構的核心引擎&#xff01;一、Spring Batch 究竟是什么&#xff1f;Spring batch是用于創建批處理應用程序&#xff08;執行一系列作業&#xff09;的開源…

【Part 3 Unity VR眼鏡端播放器開發與優化】第四節|高分辨率VR全景視頻播放性能優化

文章目錄《VR 360全景視頻開發》專欄Part 3&#xff5c;Unity VR眼鏡端播放器開發與優化第一節&#xff5c;基于Unity的360全景視頻播放實現方案第二節&#xff5c;VR眼鏡端的開發適配與交互設計第三節&#xff5c;Unity?VR手勢交互開發與深度優化第四節&#xff5c;高分辨率V…

TCP/IP協議基礎

TCPIP協議基礎 網絡模型 -OSI參考模型 -OSI參考模型各層功能 -TCP/IP網絡模型 -TCP/IP協議棧OSI參考模型 – 為了解決網絡設備之間的兼容性問題&#xff0c;國際標準化組織ISO于1984年提出了OSI RM&#xff08;開放系統互連參考模型&#xff09;。 OSI參考模型一共有七層&#…

【Nginx】Nginx代理WebSocket

1.websocketWebSocket 是一種網絡通信協議&#xff0c;它提供了在單個 TCP 連接上進行全雙工&#xff08;雙向&#xff09;通信的能力假設需求&#xff1a;把 ws://192.168.0.1:8088/ws-api/websocket/pushData代理到ws://192.168.0.156:8888/websocket/pushData&#xff1b;同…

Spring AI Alibaba Graph使用案例人類反饋

1、Spring AI Alibaba Graph 是社區核心實現之一&#xff0c;也是整個框架在設計理念上區別于 Spring AI 只做底層原子抽象的地方&#xff0c;Spring AI Alibaba 期望幫助開發者更容易的構建智能體應用。基于 Graph 開發者可以構建工作流、多智能體應用。Spring AI Alibaba Gra…

本地部署jenkins持續集成

一、準備環境&#xff08;jdk版本跟Tomcat版本要匹配&#xff09; java jdk 環境(版本是11.0.21) jenkins war包(版本是2.440.3) Tomcat (版本是 9.0.84) 二、安裝步驟 1、安裝jdk環境 1&#xff09;先安裝java環境&#xff0c;安裝完成后配置環境變量&#xff0c;參考上…

基于Java+Maven+Testng+Selenium+Log4j+Allure+Jenkins搭建一個WebUI自動化框架(1)搭建框架基本雛形

本次框架使用Maven作為代碼構建管理&#xff0c;引用了PO模式&#xff0c;將整體的代碼分成了頁面層、用例層、業務邏輯層。框架搭建流程&#xff1a;1、在pom.xml中引入依賴&#xff1a;<!-- https://mvnrepository.com/artifact/io.appium/java-client --> <depende…

從零構建MCP服務器:FastMCP實戰指南

引言&#xff1a;MCP協議與FastMCP框架 Model Context Protocol&#xff08;MCP&#xff09;是連接AI模型與外部服務的標準化協議&#xff0c;允許LLM&#xff08;如Claude、Gemini&#xff09;調用工具、訪問數據。然而&#xff0c;直接實現MCP協議需要處理JSON-RPC、會話管理…

基于FPGA的智能小車設計(包含代碼)/ 全棧FPGA智能小車:Verilog實現藍牙/語音/多傳感器融合的移動平臺

首先先聲明一下&#xff0c;本項目已經歷多輪測試&#xff0c;可以放心根據我的設計進行二次開發和直接套用&#xff01;&#xff01;&#xff01; 代碼有詳細的注釋&#xff0c;方便同學進行學習&#xff01;&#xff01; 制作不易&#xff0c;記得三連哦&#xff0c;給我動…

Object.defineProperties 詳解

Object.defineProperties 詳解 Object.defineProperties 是 JavaScript 中用于在一個對象上定義或修改多個屬性的方法。它是 Object.defineProperty 的復數版本&#xff0c;允許你一次性定義多個屬性。 基本語法 Object.defineProperties(obj, props)obj&#xff1a;要在其上定…

MyBatis-Plus:深入探索與最佳實踐

MyBatis-Plus作為MyBatis的增強版&#xff0c;已經在Java開發中得到了廣泛應用。它不僅繼承了MyBatis的所有功能&#xff0c;還提供了許多強大的擴展功能&#xff0c;幫助開發者提升開發效率和代碼質量。本文將深入探討MyBatis-Plus的高級特性及其在實際項目中的最佳實踐。一、…

勞斯萊斯數字孿生技術:重構航空發動機運維的綠色革命

在航空工業邁向智能化的浪潮中&#xff0c;勞斯萊斯以數字孿生技術為核心&#xff0c;構建了發動機全生命周期管理的創新范式。這項技術不僅重新定義了航空發動機的維護策略&#xff0c;更通過數據驅動的決策體系&#xff0c;實現了運營效率與生態效益的雙重突破。本文將從技術…

NPM組件 querypilot 等竊取主機敏感信息

【高危】NPM組件 querypilot 等竊取主機敏感信息 漏洞描述 當用戶安裝受影響版本的 querypilot 等NPM組件包時會竊取用戶的主機名、用戶名、工作目錄、IP地址等信息并發送到攻擊者可控的服務器地址。 MPS編號MPS-2kgq-v17b處置建議強烈建議修復發現時間2025-07-05投毒倉庫np…

創業商業融資計劃書PPT模版

創業商業融資計劃書PPT模版&#xff1a;https://pan.quark.cn/s/25a043e4339e

解決GitHub倉庫推送子文件夾后打不開的問題

從你描述的情況來看&#xff0c;IELTS_AI_Assessment 很可能被識別為了 Git 子模塊&#xff08;submodule&#xff09;&#xff0c;而不是普通文件夾&#xff0c;這會導致在 GitHub 上無法直接打開查看內容。以下是具體原因和解決辦法&#xff1a;為什么文件夾無法打開&#xf…

Web后端開發-請求響應

文章目錄概述請求Postman簡單參數原始方式SpringBootRequestParam注解小結實體參數數組集合參數日期參數Json參數路徑參數總結響應響應-案例概述 請求 Postman 簡單參數 原始方式 // 1. 簡單參數 // 原始方式RequestMapping("/simpleParam")public String …