I'm trying to create a contenteditable span that behaves like a password field in a Linux terminal; the text is entered, but not visible. I've experimented with different CSS properties like visibility: hidden and display: none, but they don't achieve the desired effect. Changing the text color to match the background makes it disappear, but also hides the caret.
My preference is to implement this using CSS, but I'm open to using JavaScript if necessary. Here's the code snippet:
.input {
display: inline;
}
body {
background-color: black;
}
#field-in {
color: #ffffff;
outline: none;
display: inline-block;
}<div class="input">
<span id="field"><span id="field-name">Invisible Text:</span><span id="field-in" contenteditable> </span></span>
</div>