用angularjs中的指令替换html中的星号（*）文本答案

【问题标题】：Replace text with stars (*) in html with directives in angularjs用angularjs中的指令替换html中的星号（*）文本
【发布时间】：2015-10-14 18:20:58
【问题描述】：

我需要一个带有可屏蔽属性的 textarea 控件，如果 textarea 可屏蔽，则文本应显示为星形而不是实际文本。

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

有人可以帮我解决这个问题吗？

【问题讨论】：

"没有 javascript"？不可能。
看到这个答案：stackoverflow.com/questions/1648665/…
如果您查看过StackOverflow Question，您就会明白没有 JavaScript 是不可能的！编辑为时已晚！ @OSDM
点有什么问题？
点多年来一直是屏蔽输入的标准 UI。有时，与客户顶嘴并解释这一点更容易，而不是向后弯腰并试图遵守每一分钟的要求。

标签： html angularjs input angularjs-directive passwords

【解决方案1】：

正如其他人已经指出的那样，这是不可能的，也不应该这样做。但这里有一些你应该尝试的东西。如果你真的想实现它，你将不得不在某些事情上妥协。使用contenteditable div 代替输入并使用以下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>

显然，这不是一个完美的解决方案，但您可以从这里开始。

注意：您需要调整字体大小和使用的图像。两个维度需要同步。当然，您可以使用 background-size 更改图像的大小。这里的边框只是为了视觉反馈。如果您需要调整星星的宽度，那么您可以使用calc() 并调整确切的尺寸。

【讨论】：