Masking input field text to show bullets using angular JS

Question

I have an input field with type =tel(required for devices). Need to mask the text field so that it shows bullets instead of text(like a password). Any idea how to do that using angular JS. Achieved the same for all browsers using -webkit-text-security : disc; However it doesn't work for IE. Hence wondering if we can achieve it through Angular JS.

Till now have tried creating a custom directive that changes the input type but it doesn't seem to work.

    myDirectives.directive('changeType', function() {
       return {
            priority: 500,
            compile: function(elem, attrs) {
              attrs.$set('type', 'password', false);
            }
       }
    });

HTML is pretty basic A simple input tag <input type='tel' ng-model='passcode'> Using tel to display numpad on devices. In other words I need a password field with numpad for mobile devices. — VirtualNomad
– VirtualNomad, Commented Dec 8, 2014 at 13:30
possible duplicate of Change text to dots in text field with CSS/Javascript — SoluableNonagon
– SoluableNonagon, Commented Dec 8, 2014 at 17:48

Community · Accepted Answer · 2017-05-23 12:05:37Z

First, you don't need angular to set the type, here is a plain old javascript implementation:

http://plnkr.co/edit/mCa1gvg52q0pFM6FRj7T?p=preview

window.onload = function(){
    init(); 
}
function init(){
    var x = document.getElementsByTagName("input")[0];
    var style = window.getComputedStyle(x);
    console.log(style);
    if(style.webkitTextSecurity){
        //do nothing
    }else{
        x.setAttribute("type","password");
    }
}

But in reality, there is a restriction, and you are not supposed to change input types dynamically. So angular may support this in code, but browser restrictions would/should prevent it from being changed; you might even run into being able to change it as above, but since it's evaluated once it might not work the way you expect.

See here: AngularJS: can't change input type

You'd be better off with setting the input type on page load, or using an ng-switch to flip between input types.

Collectives™ on Stack Overflow

Masking input field text to show bullets using angular JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related