Replace text with stars (*) in html with directive

Question

I need a textarea control with mask able property, if the textarea is mask able then the text should appear as stars instead of actual text.

I can have any no of textareas in my form, So i can't save actual text in other variable and save the stars or dots for actual textarea.

Can somebody help me to solve this issue?

Answer 1

As others have already pointed out, it's not possible and should not be done. But here is something which you should give a try. If you really want to achieve it, you'll have to compromise on something. Use contenteditable div instead of input and use following CSS:

Demo: http://jsfiddle.net/GCu2D/793/

CSS:

.checked {
    font-size:20px;
    position:relative;
    display:inline-block;
    border:1px solid red;
}
.checked:before {
    font-size: inherit;
    content:" ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: #FFF;
    width: 100%;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Asterisk.svg/32px-Asterisk.svg.png");
    background-repeat: repeat-x;
    z-index: 1;
    background-size: 12px;
    background-position: left center;
}

HTML:

<div contenteditable class="checked">Sample Text</div>

Obviously, this is not a perfect solution, but you can start from here.

Note: You will need to adjust the font-size and the image used. Both dimensions needs to be in sync. Ofcourse you can change the size of image using background-size . Border here is just for visual feedback. If you need to adjust the width of the stars, then you may use calc() and play around with the exact dimension.