Javascript HTML/CSS-如何在输入字段末尾显示透明文本片段

在google calculators input的这张图片中，您可以看到右侧的Paranthes未放置，但已标记，我想知道如何在HTML的输入字段末尾放置一个灰色透明字符串

---

您可以通过使用div而不是输入框来实现它

并让div看起来像一个文本框

HTML 输出

使div的属性可编辑；您可以使用contenteditable布尔值。以下是HTML的外观：

<div id='container' contenteditable>
    <div id='start'>(((((((((((</div>
    <div id='end' contenteditable="false">)))))))))))</div>
</div>

---

还有一个。

要做到这一点，您必须使用contenteditable属性和一点Javascript：

<div style="text-align: right; font: 20px Arial; outline: none; border: 1px solid #BBB; padding: 5px;" contenteditable="true">
</div>
<script>
    document.getElementsByTagName('div')[0].onkeypress = function(e){
        if (e.which == 40){
            this.innerHTML = '(<span style="color: #CCC">)</span>';
        }
        return false;
    }
</script>

---

我希望我能帮助你。

这里是你需要的工作示例

html

---

将字符串包装在标记中，使用带有rgba或不透明度的CSS。@上次我检查时，您不能在文本类型的输入中这样做，这似乎是该用户想要的。@Daedalus:我不明白。我明白了，我想OP想要的是某种屏蔽功能……我试着在它旁边画一个span，让span文本浮动在输入上，但是span文本可以focused@Mich'检查工作演示的答案。是的，但黑色文本必须是可编辑的，但不是灰色文本。它仍然不工作；可以在结束括号后添加文本，也可以将其作为块删除。不错，但偏执主题不会显示，并且无法编辑？？

<div id='container' contenteditable>
    <div id='start'>(((((((((((</div>
    <div id='end' contenteditable="false">)))))))))))</div>
</div>

<div style="text-align: right; font: 20px Arial; outline: none; border: 1px solid #BBB; padding: 5px;" contenteditable="true">
</div>
<script>
    document.getElementsByTagName('div')[0].onkeypress = function(e){
        if (e.which == 40){
            this.innerHTML = '(<span style="color: #CCC">)</span>';
        }
        return false;
    }
</script>

<div class="input">
    <p class="text"></p>
    <p class="extra"></p>
</div>

$(function(){
    $("div.input").click(function(){
        $(document).keypress(function(e){
        var char = String.fromCharCode(e.which);
            $("div.input .text").append(char);
            if(e.keyCode==40)   {
              $("div.input .extra").append("<span class='gray'>)</span>");
            }
             if(e.keyCode==41)   {
              $("div.input .extra").text("");
            }
    });
  });
});

.input{

width:500px;
height:30px;
border:1px solid black;

}


.gray{
 color:#CCCCCC;
}
p{
display:inline;}