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

【问题标题】：HTML/CSS - How to display transparent text snippet at end of input fieldHTML/CSS - 如何在输入字段末尾显示透明文本片段
【发布时间】：2013-03-16 08:12:30
【问题描述】：

在这张来自谷歌计算器输入的图片中，您可以看到右侧的括号没有放置，但已标记，我想知道如何在 HTML 的输入字段的末尾放置一个灰色透明的字符串？

【问题讨论】：

在标签中包裹字符串，使用 CSS 和 rgba 或 opacity。
@elclanrs 最后我检查了一下，你不能在 within 文本类型的输入中做到这一点，这似乎是这个用户想要的。
@Daedalus：我不明白。我明白了，我认为 OP 想要的是某种“屏蔽”功能......
我试图在它旁边创建一个跨度并使跨度文本浮动在输入上，但跨度文本可以聚焦
@Mich' 检查工作演示的答案。

标签： javascript html css input field

【解决方案1】：

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

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

HTML

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

CSS

#container {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;
    font: -moz-field;
    font: -webkit-small-control;
    display: inline-block;
}
#start {
    display: inline-block;
    color: rgba(0, 0, 0, 1);
}
#end {
    display: inline-block;
    color: rgba(0, 0, 0, 0.4);
}

输出fiddle。

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

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

还有一个fiddle。

【讨论】：

是的，但是黑色文本必须是可编辑的，而不是灰色的
还是不行；可以在右括号之后添加文本，也可以将它们作为块删除。

【解决方案2】：

为此，您必须使用 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>

希望能帮到你。

【讨论】：

不错，但括号不显示且无法编辑？？

【解决方案3】：

这是您需要的工作示例..

html

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

javascript

$(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("");
            }
    });
  });
});

css

.input{

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

}


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

jsfiddle demo

【讨论】：