它是使用不同的占位符可能屏蔽输入？ [英] Is it possible mask input using a different placeholder?

问题描述

由于我的表单没有标签，我想能够使用不同的占位符角度和角度的UI-utils的面膜：

Since my form has no labels, I would like to be able to use a different placeholder with Angular and Angular-UI-Utils-Mask:

<div ng-controller="myController">
    <input type="text"
        ng-model="date"
        ui-mask="99/99/9999"
        placeholder="Birth Date"/>  
</div>

使用 jQuery的-输入掩码它就像一个魅力，但我有太多的问题，使之与角所以我现在试图去角的方式工作，但角显示我的输入为：

Using jquery-inputmask it works like a charm, but I had too many problems to make it work with Angular so I'm now trying to go Angular way, but Angular shows my input as:

Bi/th/Date

下面是一个小提琴来显示它： http://jsfiddle.net/XS4R6/

Here's a fiddle to show it: http://jsfiddle.net/XS4R6/

我也看到一些人在谈论'ui面罩-placeholder'，但不起任何作用。

I also saw some people talking about ´ui-mask-placeholder´, but it does nothing.

有没有办法做到这一点？

Is there a way to accomplish this?

修改

要澄清，我认为这只是罚款，只使用占位符，因为你也可以使用标题（提示），所以人总是知道什么是他们应该在这些投入中键入：

To clarify, I think it's just fine to use just placeholders since you also use titles (hint) so people always know what are they supposed to type in those inputs:

显示输入 __.___.___ 是我使用的角度UI面具的人。

The input showing __.___.___ is the one I'm using Angular UI Mask.

JQuery的输入掩码的作品非常好，因为它在展示了名称占位符，一旦我鼠标或点击它显示了屏蔽输入。

JQuery Inputmask works very fine, since it shows the 'name' placeholder and as soon as I mouse over or click the input it shows the mask.

推荐答案

我想你可以用另一个标签来模拟占位符，也许这里的code是不太好，但我只是提供了另一种思路。

I'm thinking you can use another tag to simulate placeholder, maybe the code here is not very good, but I just provide another thought.

app.directive("myPlaceholder", ['$compile', function($compile){
return {
    restrict: 'A',
    link: function(scope, elem, attr) {
        attr.$observe('myPlaceholder', initialize);
        var mask = '__/__/____';

        function initialize(value) {
            // label is not clickable in IE, that's the reason why we use span tag
            var fakePlaceholder = angular.element('<span class="placeholder">' + value + '</span>');
            // click placeholder to focus the input
            fakePlaceholder.on('click', function(){
                elem.focus();
            });
            elem.before(fakePlaceholder);
            $compile(fakePlaceholder)(scope);

            elem.on('focus', function() {
                fakePlaceholder.hide();
            }).on('blur', function() {
                if (elem.val() === mask) {
                    fakePlaceholder.show();
                }
            });
        }
    }
};
}]);

演示在 http://jsfiddle.net/XS4R6/19/ （需要jQuery的）

demo on http://jsfiddle.net/XS4R6/19/ (jQuery required)

这篇关于它是使用不同的占位符可能屏蔽输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！