javascript - 将 html 文本框屏蔽为美国电话号码格式
问题描述
我使用以下代码进行屏蔽。
但问题在于光标的位置。
HTML
JS
Array.prototype.forEach.call(document.body.querySelectorAll("*[data-mask]"), applyDataMask);
函数 applyDataMask(field) { var mask = field.dataset.mask.split('');
// For now, this just strips everything that's not a number
function stripMask(maskedData) {
function isDigit(char) {
return /\d/.test(char);
}
return maskedData.split('').filter(isDigit);
}
// Replace `_` characters with characters from `data`
function applyMask(data) {
return mask.map(function (char) {
if (char != '_') return char;
if (data.length == 0) return char;
return data.shift();
}).join('')
}
function reapplyMask(data) {
return applyMask(stripMask(data));
}
function changed() {
var oldStart = field.selectionStart;
var oldEnd = field.selectionEnd;
field.value = reapplyMask(field.value);
field.selectionStart = oldStart;
field.selectionEnd = oldEnd;
}
field.addEventListener('click', changed)
field.addEventListener('keyup', changed)
}
解决方案
HTML:
<input id="txtPhone" data-mask="(___) ___-____" type="text" />
Javascript:
Array.prototype.forEach.call(document.body.querySelectorAll("*[data-mask]"), applyDataMask);
function applyDataMask(field) {
var mask = field.dataset.mask.split('');
// For now, this just strips everything that's not a number
function stripMask(maskedData) {
function isDigit(char) {
return /\d/.test(char);
}
return maskedData.split('').filter(isDigit);
}
// Replace `_` characters with characters from `data`
function applyMask(data) {
return mask.map(function (char) {
if (char != '_') return char;
if (data.length == 0) return char;
return data.shift();
}).join('')
}
function reapplyMask(data) {
return applyMask(stripMask(data));
}
function changed(e) {
var i = field.value.indexOf('_');
if (e.keyCode == undefined) {
i = 0;
}
field.value = reapplyMask(field.value);
field.selectionStart = i;
field.selectionEnd = i;
}
field.addEventListener('click', changed)
field.addEventListener('keyup', changed);
}
推荐阅读
- powerbi - 基于多个切片器值 Power BI 显示用户计数
- javascript - 无法获取动态创建的输入字段的更改值
- android - 颤振 - 在应用购买插件中运行时出错:“MissingPluginException for BillingClient”
- python - What is difference between soup of selenium and requests?
- laravel - Laravel - Error: App\Exports\View must be compatible with Maatwebsite\Excel\Concerns\FromView::view(): Illuminate\Contracts\View\View
- angular - 如何在 Angular 应用程序的 cypress 测试中公开/访问数据存储状态?
- python - I keep getting a 404 error when django is looking for static files
- c++ - 源过滤器中的 DirectShow API MediaInfo 字段
- c# - 我怎样才能得到这个值?
- node.js - 了解 GraphQl 查询