diff --git a/web/html/xui/client_bulk_modal.html b/web/html/xui/client_bulk_modal.html
index 00e385b13..827fc951f 100644
--- a/web/html/xui/client_bulk_modal.html
+++ b/web/html/xui/client_bulk_modal.html
@@ -43,7 +43,7 @@
                     <a-icon type="question-circle" theme="filled"></a-icon>
                 </a-tooltip>
             </span>
-            <a-input type="number" v-model.number="clientsBulkModal.limitIp" min="0" style="width: 70px;" ></a-input>
+            <a-input-number v-model="clientsBulkModal.limitIp" min="0"></a-input-number>
         </a-form-item>
         <a-form-item v-if="clientsBulkModal.inbound.xtls" label="Flow">
             <a-select v-model="clientsBulkModal.flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
@@ -79,7 +79,7 @@
             <a-switch v-model="clientsBulkModal.delayedStart" @click="clientsBulkModal.expiryTime=0"></a-switch>
         </a-form-item>
         <a-form-item label='{{ i18n "pages.client.expireDays" }}' v-if="clientsBulkModal.delayedStart">
-            <a-input type="number" v-model.number="delayedExpireDays" :min="0"></a-input>
+            <a-input-number v-model="delayedExpireDays" :min="0"></a-input-number>
         </a-form-item>
         <a-form-item v-else>
             <span slot="label">
diff --git a/web/html/xui/component/setting.html b/web/html/xui/component/setting.html
index 00eeb2599..efd616842 100644
--- a/web/html/xui/component/setting.html
+++ b/web/html/xui/component/setting.html
@@ -9,7 +9,7 @@
                 <a-input :value="value" @input="$emit('input', $event.target.value)"></a-input>
             </template>
             <template v-else-if="type === 'number'">
-                <a-input type="number" :value="value" @input="$emit('input', $event.target.value)" :min="min"></a-input>
+                <a-input-number :value="value" @change="value => $emit('input', value)" :min="min" style="width: 100%;"></a-input-number>
             </template>
             <template v-else-if="type === 'textarea'">
                 <a-textarea :value="value" @input="$emit('input', $event.target.value)" :auto-size="{ minRows: 10, maxRows: 10 }"></a-textarea>
diff --git a/web/html/xui/form/client.html b/web/html/xui/form/client.html
index 38402ec7e..b9d939d1d 100644
--- a/web/html/xui/form/client.html
+++ b/web/html/xui/form/client.html
@@ -22,7 +22,7 @@
         <a-input v-model.trim="client.password" style="width: 150px;" ></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "additional" }} ID' v-if="inbound.protocol === Protocols.VMESS">
-        <a-input type="number" v-model.number="client.alterId" style="width: 70px;"></a-input>
+        <a-input-number v-model="client.alterId" style="width: 70px;"></a-input-number>
     </a-form-item>
     <a-form-item label="ID" v-if="inbound.protocol === Protocols.VMESS || inbound.protocol === Protocols.VLESS">
         <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
@@ -43,7 +43,7 @@
 				<a-icon type="question-circle" theme="filled"></a-icon>
 			</a-tooltip>
 		</span>
-		<a-input type="number" v-model.number="client.limitIp" min="0" style="width: 70px;" ></a-input>
+        <a-input-number v-model="client.limitIp" min="0" style="width: 70px;"></a-input-number>
 	</a-form-item>
 	<a-form-item v-if="client.email && client.limitIp > 0 && isEdit">
 		<span slot="label">
@@ -108,7 +108,7 @@
         <a-switch v-model="clientModal.delayedStart" @click="client._expiryTime=0"></a-switch>
     </a-form-item>
     <a-form-item label='{{ i18n "pages.client.expireDays" }}' v-if="clientModal.delayedStart">
-        <a-input type="number" v-model.number="delayedExpireDays" :min="0"></a-input>
+        <a-input-number v-model="delayedExpireDays" :min="0"></a-input-number>
     </a-form-item>
     <a-form-item v-else>
         <span slot="label">
diff --git a/web/html/xui/form/inbound.html b/web/html/xui/form/inbound.html
index 09e7099d1..1cc4e2ea4 100644
--- a/web/html/xui/form/inbound.html
+++ b/web/html/xui/form/inbound.html
@@ -25,7 +25,7 @@
         <a-input v-model.trim="inbound.listen"></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.port" }}'>
-        <a-input type="number" v-model.number="inbound.port"></a-input>
+        <a-input-number v-model="inbound.port"></a-input-number>
     </a-form-item>
     <a-form-item>
         <span slot="label">
diff --git a/web/html/xui/form/protocol/dokodemo.html b/web/html/xui/form/protocol/dokodemo.html
index 53c82c3cb..f9204b8ca 100644
--- a/web/html/xui/form/protocol/dokodemo.html
+++ b/web/html/xui/form/protocol/dokodemo.html
@@ -4,7 +4,7 @@
         <a-input v-model.trim="inbound.settings.address"></a-input>
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.destinationPort"}}'>
-        <a-input type="number" v-model.number="inbound.settings.port"></a-input>
+        <a-input-number v-model="inbound.settings.port"></a-input-number>
     </a-form-item>
     <a-form-item label='{{ i18n "pages.inbounds.network"}}'>
         <a-select v-model="inbound.settings.network" style="width: 100px;" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
diff --git a/web/html/xui/form/protocol/trojan.html b/web/html/xui/form/protocol/trojan.html
index b52c4dd90..65344f110 100644
--- a/web/html/xui/form/protocol/trojan.html
+++ b/web/html/xui/form/protocol/trojan.html
@@ -33,7 +33,7 @@
                     <a-icon type="question-circle" theme="filled"></a-icon>
                 </a-tooltip>
             </span>
-            <a-input type="number" v-model.number="client.limitIp" min="0"  style="width: 70px;" ></a-input>
+            <a-input-number v-model="client.limitIp" min="0"  style="width: 70px;"></a-input-number>
         </a-form-item>
         <a-form-item v-if="inbound.xtls" label="Flow">
             <a-select v-model="client.flow" style="width: 150px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
@@ -113,7 +113,7 @@
             <a-input v-model="fallback.dest"></a-input>
         </a-form-item>
         <a-form-item label="xVer">
-            <a-input type="number" v-model.number="fallback.xver"></a-input>
+            <a-input-number v-model="fallback.xver"></a-input-number>
         </a-form-item>
         <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
     </a-form>
diff --git a/web/html/xui/form/protocol/vless.html b/web/html/xui/form/protocol/vless.html
index 1d733d021..b05f2157b 100644
--- a/web/html/xui/form/protocol/vless.html
+++ b/web/html/xui/form/protocol/vless.html
@@ -33,7 +33,7 @@
                     <a-icon type="question-circle" theme="filled"></a-icon>
                 </a-tooltip>
             </span>
-            <a-input type="number" v-model.number="client.limitIp" min="0"  style="width: 70px;" ></a-input>
+            <a-input-number v-model="client.limitIp" min="0"  style="width: 70px;"></a-input-number>
         </a-form-item>
         <a-form-item v-if="inbound.xtls" label="Flow">
             <a-select v-model="inbound.settings.vlesses[index].flow" style="width: 200px" :dropdown-class-name="siderDrawer.isDarkTheme ? 'ant-card-dark' : ''">
@@ -119,7 +119,7 @@
             <a-input v-model="fallback.dest"></a-input>
         </a-form-item>
         <a-form-item label="xVer">
-            <a-input type="number" v-model.number="fallback.xver"></a-input>
+            <a-input-number v-model="fallback.xver"></a-input-number>
         </a-form-item>
         <a-divider v-if="inbound.settings.fallbacks.length - 1 === index"/>
     </a-form>
diff --git a/web/html/xui/form/protocol/vmess.html b/web/html/xui/form/protocol/vmess.html
index 9cd48544b..86ceead8a 100644
--- a/web/html/xui/form/protocol/vmess.html
+++ b/web/html/xui/form/protocol/vmess.html
@@ -15,7 +15,7 @@
             <a-input v-model.trim="client.email" style="width: 150px;"></a-input>
         </a-form-item>
         <a-form-item label='{{ i18n "additional" }} ID'>
-            <a-input type="number" v-model.number="client.alterId" style="width: 70px;"></a-input>
+            <a-input-number v-model="client.alterId" style="width: 70px;"></a-input-number>
         </a-form-item>
         <a-form-item label="ID">
             <a-input v-model.trim="client.id" style="width: 300px;"></a-input>
@@ -36,7 +36,7 @@
                     <a-icon type="question-circle" theme="filled"></a-icon>
                 </a-tooltip>
             </span>
-            <a-input type="number" v-model.number="client.limitIp" min="0" style="width: 70px;"></a-input>
+            <a-input-number v-model="client.limitIp" min="0" style="width: 70px;"></a-input-number>
         </a-form-item>
         <a-form-item>
             <span slot="label">
diff --git a/web/html/xui/form/stream/stream_kcp.html b/web/html/xui/form/stream/stream_kcp.html
index fd31b1ee1..1dc6eb9df 100644
--- a/web/html/xui/form/stream/stream_kcp.html
+++ b/web/html/xui/form/stream/stream_kcp.html
@@ -11,28 +11,28 @@
         </a-select>
     </a-form-item>
     <a-form-item label='{{ i18n "password" }}'>
-        <a-input v-model.number="inbound.stream.kcp.seed"></a-input>
-    </a-form-item>
+        <a-input v-model="inbound.stream.kcp.seed"></a-input>
+    </a-form-item><br />
     <a-form-item label="MTU">
-        <a-input type="number" v-model.number="inbound.stream.kcp.mtu"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.mtu"></a-input-number>
     </a-form-item>
     <a-form-item label="TTI (ms)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.tti"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.tti"></a-input-number>
     </a-form-item>
     <a-form-item label="Uplink Capacity (MB/S)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.upCap"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.upCap"></a-input-number>
     </a-form-item>
     <a-form-item label="Downlink Capacity (MB/S)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.downCap"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.downCap"></a-input-number>
     </a-form-item>
     <a-form-item label="Congestion">
         <a-switch v-model="inbound.stream.kcp.congestion"></a-switch>
     </a-form-item>
     <a-form-item label="Read Buffer Size (MB)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.readBuffer"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.readBuffer"></a-input-number>
     </a-form-item>
     <a-form-item label="Write Buffer Size (MB)">
-        <a-input type="number" v-model.number="inbound.stream.kcp.writeBuffer"></a-input>
+        <a-input-number v-model="inbound.stream.kcp.writeBuffer"></a-input-number>
     </a-form-item>
 </a-form>
 {{end}}
\ No newline at end of file
diff --git a/web/html/xui/form/tls_settings.html b/web/html/xui/form/tls_settings.html
index e4be34cf5..7962acf3f 100644
--- a/web/html/xui/form/tls_settings.html
+++ b/web/html/xui/form/tls_settings.html
@@ -140,7 +140,7 @@
         </a-switch>
     </a-form-item>
     <a-form-item label="xVer">
-        <a-input type="number" v-model.number="inbound.stream.reality.xver" :min="0" style="width: 60px"></a-input>
+        <a-input-number v-model="inbound.stream.reality.xver" :min="0" style="width: 60px"></a-input-number>
     </a-form-item>
     <a-form-item label="uTLS" >
         <a-select v-model="inbound.stream.reality.settings.fingerprint"