文字列の制限数はテキストエリアで入力できます

Question

私はテキストエリアを持っていて、最後に[type = image]（絶対）を入力しました。入力されたか、アイコンのためのより多くの空き領域が可能COLSの数を制限する -

ユーザータイプテキストは、テキストはこの

しかし、私がしたいことは、Googleの翻訳のバージョンのようにあるように、この画像の下に表示される場合があります

は、ここに私のコードです

#cross { 
 
    position: absolute; 
 
    margin-left: -19px; 
 
    margin-top: 36px; 
 
}

<div class="form-group col-md-6" id="txtbox1"> 
 
    <input type="image" onclick="clearMessageArea('#userMessage')" src="img/cross.svg" id="cross" style="width: 14px; height: 14px" /> 
 
    <textarea class="form-control" id="userMessage" rows="6" style="resize: none"></textarea> 
 
</div>

Answer 1

文字が右端まで来るのを避けるためには、padding-rightをいくつか持つことができます。しかし、それは他のラインも右端まで行かないことを意味します。

#cross { 
 
    position: absolute; 
 
    margin-left: -19px; 
 
    margin-top: 36px; 
 
} 
 

 
#userMessage { 
 
    padding-right: 15px; 
 
    width: 200px; 
 
}

<div class="form-group col-md-6" id="txtbox1"> 
 
    <input type="image" onclick="clearMessageArea('#userMessage')" src="https://placehold.it/14" id="cross" style="width: 14px; height: 14px" /> 
 
    <textarea class="form-control" id="userMessage" rows="6" style="resize: none"></textarea> 
 
</div>

アップデート：Googleはまた、このためpadding-right: 20pxを使用しています。 hereを確認できます。

Answer 2

テキスト領域にpadding-rightを適用します。以下の作業例を参照してください。

*{ 
 
    box-sizing:border-box; 
 
} 
 
.wrap{ 
 
    position: relative; 
 
} 
 
.close{ 
 
    position:absolute; 
 
    right:4px; 
 
    top:0; 
 
} 
 
textarea{ 
 
    padding-right:14px; 
 
    width:100%; 
 
}

<div class = 'wrap'> 
 
<span class = 'close'>x</span> 
 
<textarea name="" id="" cols="30" rows="10"> 
 
    
 
</textarea> 
 
</div>