我正在尝试创建一个指令来为我的输入创建自定义掩码。我知道还有其他库可以使用,但有时我需要根据公司需求进行自定义输入(例如“OS.012-08765”),所以我宁愿创建自己的指令。
到目前为止,我能够在我需要的模式上格式化数字,但不能在输入上格式化,只能在模型上格式化。对于这个例子,我将使用金钱输入,因为它更容易使用(我认为)。这是我正在使用的代码:
function myMoney() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attr, ngModelCtrl) {
ngModelCtrl.$formatters.push( formatInput );
ngModelCtrl.$render = renderViewValue;
ngModelCtrl.$parsers.push( parseOutput );
function formatInput( value ) {
value = formatNumber(value);
return value;
}
function parseOutput( value ) {
value = formatNumber(value);
return value;
}
function renderViewValue() {
element.html( ngModelCtrl.$viewValue );
}
function formatNumber(value) {
if(!value) {
value = '000';
}
var checkValue = value.replace(/[^0-9\.]/g, '');
if(checkValue != value) {
value = checkValue;
}
value = value.toString();
if(value.length < 3) {
value = ('000'+value).slice(-3);
}
var
firstChar = value.slice(0, value.length-2),
lastChar = value.slice(-2),
firstChar = Number(firstChar).toLocaleString(),
finalChar = '$'+firstChar+','+lastChar;
return finalChar;
}
}
}
}
这是一个带有代码的 plunkr:http://plnkr.co/edit/UjZkPFL0V4FRrDUL9jAJ?p=preview
主要问题是输出在哪里,如果您开始在输入上键入,则该值没有掩码,只是数字。但模型有合适的面具。
因此,基于此,我有两个主要问题:
- 第一:我想反转这些结果。我想在文本框中输入内容并将掩码放在文本框中,而模型只是普通数字(没有掩码)。
- 第二:如果我创建一个按钮来更新模型上的值,它不会在掩码内格式化,它会保持纯文本。
我该如何解决这些问题?
尝试使用 ui mask,https://htmlpreview.github.io/?https://github.com/angular-ui/ui-mask/master/demo/index.html, enter AA.999-99999 under 掩码定义字段来匹配您的模式。
<input type="text"
ng-model="serviceOrderNumber"
ui-mask="AA.999-99999"
ui-mask-placeholder
ui-mask-placeholder-char="_"/>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)