[英]Formatting text input with angular
I want to format the view of a text input for a Dutch zipcode, which always starts with 4 digits, and ends with 2 letters. 我想格式化荷兰邮政编码的文本输入视图,该邮政编码始终以4位数字开头,以2个字母结尾。 Ie: 1234 AA.
即:1234 AA。 I want a text input to automatically format the data to this format.
我想要一个文本输入来自动将数据格式化为这种格式。
I tried this with ui.mask, which works if you don't put in a custom-placeholder. 我尝试使用ui.mask,如果你没有放入自定义占位符,它会起作用。 I don't really like the placeholder
____ __
, so I set up 1234 AA
. 我真的不喜欢占位符
____ __
,所以我设置了1234 AA
。
http://plnkr.co/edit/5zC2pAM4UBNC046jwQDy http://plnkr.co/edit/5zC2pAM4UBNC046jwQDy
This works, but it could be possible that my zipcode starts with a 1. When I try to enter my example-zipcode 1122 AB, I can't. 这有效,但我的邮政编码可能以1开头。当我尝试输入我的例子 - 邮政编码1122 AB时,我不能。
I also messed around with formatters and parsers, but I couldn't get it to work. 我也搞乱了格式化程序和解析器,但我无法让它工作。 The value in the model should be 1234AA, without a space.
模型中的值应为1234AA,没有空格。
It seems that setting a placeholder in the input messes with the masking. 似乎在输入混乱中设置占位符与掩蔽。
What you can do is create a directive to add the placeholder after ui-mask processes that there is no placeholder and uses the ui-mask's value instead: 您可以做的是创建一个指令,在ui-mask进程之后添加占位符,没有占位符并使用ui-mask的值代替:
Create this directive: 创建此指令:
.directive("myPlaceholder",function($timeout){
return{
link: function(scope, element, attrs){
$timeout(function() {
element.removeAttr('placeholder');
element.attr('placeholder', attrs.myPlaceholder);
});
}
}
})
And set it into your input instead of the actual placeholder: 并将其设置为您的输入而不是实际的占位符:
<input type="text" ui-mask="9999 AA" ng-model="x" my-placeholder="1234 AA" />
Check it here: 在这里查看:
http://plnkr.co/edit/Hxj63BXDmldEpGJry8F9?p=preview http://plnkr.co/edit/Hxj63BXDmldEpGJry8F9?p=preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.