用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.

我的表单中可以没有任何文本区域，因此我无法将实际文本保存在其他变量中，也无法为实际文本区域保存星号或点.

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 div 而不是 input 并使用以下 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.

注意:您需要调整字体大小和使用的图像.两个维度都需要同步.当然，您可以使用 background-size 更改图像的大小.此处的边框仅用于视觉反馈.如果你需要调整星星的宽度，那么你可以使用 calc() 并使用精确的尺寸.

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屋！