如何使用掩码实现输入 [英] How to implement an input with a mask

问题描述

我想为接受日期的文本输入字段实现一个掩码。掩码的值应直接显示在输入内。

这样的一个例子：

 < input type ='text'value ='____ / __ / __'> 
  

我在这个例子中写了一个值，但我的目的是让人们写一个日期不输入 / 或 - 分隔月，年和日。用户应该能够在显示的字段中输入数字，而掩码在用户键入时自动执行格式。

我在其他网站上看到这种行为，但我不知道它如何工作或如何自己实现。

解决方案

输入掩码可以使用< a href =https://developer.mozilla.org/en-US/docs/Web/Events/keyup =noreferrer> keyup 事件和 HTMLInputElement value ， selectionStart 和 selectionEnd 属性。这是一个非常简单的实现，可以做一些你想要的。这绝对不是完美的，但是效果很好，可以演示原理：

  .prototype.forEach.call（document.body.querySelectorAll（* [data-mask]），applyDataMask）; function applyDataMask（field）{var mask = field.dataset.mask.split（''）; //现在，这只是剥夺所有不是数字函数的功能stripMask（maskedData）{function isDigit（char）{return /\d/.test(char）; } return maskedData.split（''）。filter（isDigit）; } //将`_`个字符替换为`data`函数的函数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）}  

  ISO日期：< input type =textvalue =____ _ _ _ _ _data-mask =____ _ _ _ _ _/>< br />电话：< input type =textvalue =（___）___-____data-mask =（___）___-____/>< br />  pre> 

（在JSFiddle中查看）

还有一些执行此功能的库。一些例子包括：

• jquery.inputmask


• MASKED INPUT PLUGIN


• Politespace （提供一个替代输入掩码）

I would like to implement a mask for a text input field which accepts a date. The masked value should display directly inside of the input.

Something like this:

<input type='text' value='____/__/__'>

I wrote the mask as a value in that example, but my intent is to allow people to write a date without typing / or - to separate months, years and days. The user should be able to enter numbers into the displayed field, while the mask enforces the format automatically as the user types.

I have seen this behavior on other sites, but I have no idea how it works or how to implement it myself.

解决方案

Input masks can be implemented using a combination of the keyup event, and the HTMLInputElement value, selectionStart, and selectionEnd properties. Here's a very simple implementation which does some of what you want. It's certainly not perfect, but works well enough to demonstrate the principle:

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

ISO Date: <input type="text" value="____-__-__" data-mask="____-__-__"/><br/>
Telephone: <input type="text" value="(___) ___-____" data-mask="(___) ___-____"/><br/>

(View in JSFiddle)

There are also a number of libraries out there which perform this function. Some examples include:

• jquery.inputmask
• MASKED INPUT PLUGIN
• Politespace (presents an alternative to input masks)

这篇关于如何使用掩码实现输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！