如何使用掩码实现输入

本文介绍了如何使用掩码实现输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我想为接受日期的文本输入字段实现一个掩码。掩码的值应直接显示在输入内。 这样的一个例子： < input type ='text'value ='____ / __ / __'> 我在这个例子中写了一个值，但我的目的是让人们写一个日期不输入 / 或 - 分隔月，年和日。用户应该能够在显示的字段中输入数字，而掩码在用户键入时自动执行格式。 我在其他网站上看到这种行为，但我不知道它如何工作或如何自己实现。解决方案输入掩码可以使用 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.inputmaskMASKED INPUT PLUGINPolitespace (presents an alternative to input masks) 这篇关于如何使用掩码实现输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！