1

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

在此处输入图像描述

4

3 回答 3

2

您可以通过使用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);
}

输出小提琴。

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

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

还有一个小提琴。

于 2013-03-16T08:27:01.127 回答
-1

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

我希望我能帮助你。

于 2013-03-16T08:29:55.533 回答
-1

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

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 演示

于 2013-03-16T08:31:58.290 回答