限制列數可以在textarea中輸入

我在裏面有一個textarea和input [type = image]定位（絕對）。限制列數可以在textarea中輸入

當用戶鍵入文本，文本可能會喜歡這個

但我想要的是像谷歌翻譯的版本，這個形象下出現 - 以限制可以輸入或圖標的更多自由空間的cols數

這裏是我的代碼

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

來源

2017-09-24 EzeR eZ

使用填充右：14px的文本區域。 –

_「我想要成爲谷歌翻譯的版本」_您可以隨時在Google翻譯器上使用檢查元素，看看他們是如何做到的。 – yuriy636

你可以有一些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>

更新：谷歌也使用padding-right: 20px這一點。您可以檢查here。

來源

2017-09-24 09:09:14 Nisarg

謝謝！不知道填充會影響文本，而不是textarea本身 –

對文本區域應用填充權限。見下面的工作示例。

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

來源

2017-09-24 09:16:59

限制列數可以在textarea中輸入

回答

相關問題