Question

我已经有一个将其格式化为正确数字格式的代码，但是问题是 1.第一个和第二个连字符后的数字输入位置不正确。样品。当我在第一个（-）之后输入12345时，它将是123465。该位置被交换。 2.如果数字已经达到最大数目，则用户不能在数字中间添加。现在发生的是，如果我单击文本框的中间，我可以添加数字，并且所有的最后一部分都将替换。

JSFIDDLE CODE

HTML + JS

Telephone: <input type="text" value="____-___-___" data-mask="____-___-___"/><br/>

 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() {   
    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)

}

Answer 1

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);
}

使用空格屏蔽电话号码格式

1 个答案: