下面是一个使用日期格式的掩码来编辑文本框的示例代码:
HTML代码:
JavaScript代码:
// 获取日期输入框元素
var dateInput = document.getElementById('dateInput');
// 创建日期格式的掩码
var dateMask = [/\d/, /\d/, /\d/, /\d/, '-', /\d/, /\d/, '-', /\d/, /\d/];
// 初始化输入框的值和掩码
initializeMask();
// 初始化输入框的值和掩码
function initializeMask() {
// 设置输入框的初始值为空
dateInput.value = '';
// 设置输入框的初始掩码
setInputMask(dateMask);
}
// 设置输入框的掩码
function setInputMask(mask) {
// 移除输入框的现有事件处理程序
dateInput.removeEventListener('keydown', handleInput);
dateInput.removeEventListener('input', handleInput);
// 添加新的事件处理程序
dateInput.addEventListener('keydown', handleInput);
dateInput.addEventListener('input', handleInput);
// 应用掩码
handleInput();
}
// 处理输入框的输入事件
function handleInput() {
// 获取输入框的值
var value = dateInput.value;
// 移除输入框中的非数字字符
value = value.replace(/\D/g, '');
// 根据掩码格式化输入框的值
var formattedValue = '';
var maskIndex = 0;
for (var i = 0; i < value.length; i++) {
if (maskIndex >= dateMask.length) {
break;
}
if (dateMask[maskIndex].test(value.charAt(i))) {
formattedValue += value.charAt(i);
maskIndex++;
}
}
// 更新输入框的值
dateInput.value = formattedValue;
}
这段代码会在日期输入框中添加一个掩码,只允许输入数字和日期格式的分隔符。当用户输入文字时,它会根据掩码格式化输入框的值。