在angularjs指令替换HTML文本与星（*） [英] Replace text with stars (*) in html with directives in angularjs

问题描述

我需要面具能够属性textarea的控制，如果textarea的是面膜能则文本应显示为恒星，而不是实际的文本。

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.

我可以有任何文字区域没有在我的形式，所以我不能保存在其他变量的实际文本并保存星星或点实际的textarea。

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?

推荐答案

正如其他人已经指出，这是不可能的，不应该做的。但这里是一些你应该给一个尝试。如果你真的想实​​现它，你就必须对一些妥协。使用 CONTENTEDITABLE 股利而不是投入和使用下面的CSS：

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:

演示： 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.

注意：您将需要调整字体大小和使用的图像。这两个层面都需要保持同步。 Ofcourse，你可以使用背景大小改变图片的大小。这里的边界仅仅是视觉反馈。如果您需要调整星星的宽度，那么您可以使用钙（）和玩的确切尺寸。

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.

这篇关于在angularjs指令替换HTML文本与星（*）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！