Question

我需要一个带有mask属性的textarea控件，如果textarea是mask，那么文本应该显示为星号而不是实际文本。

我的格式中可以包含任何textareas，因此我无法将实际文本保存在其他变量中，并保存实际文本区域中的星号或点。

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

Answer 1

正如其他人已经指出的那样，这是不可能的，也不应该完成。但是这里有一些你应该尝试的东西。如果你真的想要实现它，你将不得不妥协。使用contenteditable div代替输入并使用以下CSS：

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()并使用精确尺寸。

使用angularjs中的指令将文本替换为html中的星号（*）

1 个答案: