CODEWITHSUNDEEP
javascripthtmlcss
zhanymkanov
zhanymkanov

Reputation: 606

Limit number of cols can be typed in textarea

I have a textarea and input [type=image] positioned (absolute) inside it at the end.

When user types a text, text might appear under this image like this My example

But what I want is to be as Google Translator's version - to limit number of cols that can be typed or more free space for iconGoogle Translator

Here's my code

#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>

Upvotes: 0

Views: 41

Answers (2)

Balakrishna Gondesi
Balakrishna Gondesi

Reputation: 118

apply padding-right to the text area. see working example below. 

*{
  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>

Upvotes: 1

Nisarg Shah
Nisarg Shah

Reputation: 14541

You could have some padding-right to avoid having characters going till the right edge. But that means that other lines will also not go till the right edge. 

#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>

Update: Google also uses padding-right: 20px for this. You can check here.

Upvotes: 2

Related Questions