locked
How to mask the letters in text box type=tel without using webkit-text-security=disc in css ?

    Question

  • Im using html for developing UI, I need some alternate solution for masking the text since webkit-text-security: disc is not supported by windows 8. And the text filed should be text=tel, since the key pad should be numbers.?
    Thursday, January 03, 2013 7:14 AM

Answers

  • Hi,

    text=tel or number just open the numeric keyboard. But don't restrict the input. If you need mask the input, I think you could write some javascript to implement.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Wednesday, January 09, 2013 9:03 AM
    Friday, January 04, 2013 6:38 AM
  • You can use the HTML5 "pattern" attribute to limit the input values. It works on IE10. W3School

    To get the "password" mask when the type is "tel" you could do something like:

    var inp = document.getElementById("your_input_id");
    inp.addEventListener( 'focus', function(){
        inp.type = 'tel';
    });
    inp.addEventListener( 'blur', function(){
        inp.type = 'password';
    });
    So it becomes a "tel" on focus and a "password" on blur, hiding and showing the input accordingly.

    • Marked as answer by Song Tian Wednesday, January 09, 2013 9:03 AM
    Friday, January 04, 2013 5:02 PM

All replies

  • Hi,

    text=tel or number just open the numeric keyboard. But don't restrict the input. If you need mask the input, I think you could write some javascript to implement.


    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Wednesday, January 09, 2013 9:03 AM
    Friday, January 04, 2013 6:38 AM
  • You can use the HTML5 "pattern" attribute to limit the input values. It works on IE10. W3School

    To get the "password" mask when the type is "tel" you could do something like:

    var inp = document.getElementById("your_input_id");
    inp.addEventListener( 'focus', function(){
        inp.type = 'tel';
    });
    inp.addEventListener( 'blur', function(){
        inp.type = 'password';
    });
    So it becomes a "tel" on focus and a "password" on blur, hiding and showing the input accordingly.

    • Marked as answer by Song Tian Wednesday, January 09, 2013 9:03 AM
    Friday, January 04, 2013 5:02 PM