1

Google 電卓の入力からのこの図では、右側のかっこが配置されていませんが、マークされていることがわかります。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 に答える