HTML怎么做input银行卡格式_HTML input银行卡号自动分隔【实例】-html教程-PHP中文网

最可靠方法是用oninput事件配合正则实时过滤非数字字符并每4位加空格：先replace(/\d/g,'')清除非数字，再match(/.{4}/g)切分，最后join(' ')；需用setselectionrange修复光标跳变问题。

html怎么做input银行卡格式_html input银行卡号自动分隔【实例】

input银行卡号怎么自动加空格分隔

直接用 input 的 oninput 事件 + 正则格式化最可靠，不用依赖第三方库。浏览器原生支持好，iOS 和 Android 键盘输入也正常触发。

关键不是“加空格”，而是“实时过滤非数字字符 + 每4位插入一个空格”，否则用户粘贴带空格/短横线的卡号会出错。

必须先 .replace(/\D/g, '') 清掉所有非数字字符（包括中文、字母、短横线、全角空格）
再按每4位切分：value.match(/.{4}/g)，最后用 .join(' ')
注意光标跳变问题：直接赋值 input.value = formatted 会导致安卓微信里光标跑到末尾，得用 setSelectionRange 保持位置

为什么不能用 type="tel" 或 pattern 属性实现分隔

type="tel" 只影响软键盘类型和基础校验，不提供格式化能力；pattern 是表单提交时校验用的，完全不干预输入过程。两者都做不到“边输边加空格”。

更实际的问题是：pattern 一旦写成 pattern="\d{4} \d{4} \d{4} \d{4}"，用户根本没法逐位输入——还没输完就提示 invalid。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

pattern 不适用于实时格式化场景，只适合最终提交前的粗略校验
移动端 type="number" 会唤起数字键盘但禁止输入空格，反而破坏分隔逻辑
真正能控制输入流的只有 oninput + event.preventDefault() 组合（需谨慎使用）

兼容 iOS 微信、安卓 WebView 的最小可行代码

下面这段可以直接复制进 HTML 使用，已实测通过微信内置浏览器、Chrome Android、Safari iOS：

<input type="text" inputmode="numeric" maxlength="19" placeholder="请输入银行卡号" oninput="formatBankCard(this)"><p><script>
function formatBankCard(el) {
let v = el.value.replace(/\D/g, '');
if (v.length > 16) v = v.slice(0, 16);
let segments = v.match(/.{4}/g) || [];
el.value = segments.join(' ');</script></p><p>// 修复 iOS 光标偏移（仅当用户在中间编辑时需要）
if (v.length % 4 === 0 && v.length > 0 && el.selectionStart === el.value.length) {
el.setSelectionRange(el.value.length - 1, el.value.length - 1);
}
}
</p>

注意：inputmode="numeric" 比 type="number" 更稳妥，它只唤起数字键盘，不限制空格输入；maxlength="19" 是因为最多 4 组 × 4 位 + 3 个空格。