То, что Вы видите на рисунке - прозрачная textarea
, но под ней лежит белый div
, куда посредством JavaScript
копируется содержимое из textarea
. Символы в textarea
имеют полупрозрачный желтый, в div
- чёрный, и при точном наложении получается тот цвет, который Вы видите. Хотя оба элемента имеют одинаковые настройки padding
, как видно, получается не всё совсем одинаково:
$container = $('#container');
$textarea = $('#textarea');
$underlay = $('#underlay');
updateProjection();
$textarea.on('keyup', function(){
updateProjection();
});
function updateProjection(){
var textareaContains = $textarea.val();
textareaContains = '<p>'+textareaContains.replace(/\n\s*\n/g,'</p><p>')+'</p>';
textareaContains = textareaContains.replace(/\n{1}/g,'<br />');
$underlay.html(textareaContains);
var textareaContainsHeight = $textarea[0].scrollHeight;
$textarea.outerHeight(textareaContainsHeight);
$underlay.outerHeight(textareaContainsHeight);
$container.height($underlay.outerHeight());
}
*{
box-sizing: border-box;
}
body{
width: 300px;
}
#container{
background-color: #d6ebf5;
position: relative;
padding: 5px 10px;
}
#textarea, #underlay{
font-family: Arial, sans-serif;
font-size: 13px;
position: absolute;
top: 5px;
left: 10px;
padding: 4px 8px;
overflow-y: hidden;
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
height: 70px; // начальная
}
#textarea {
font-size: 13px;
outline: none;
padding: 4px 8px;
border: none;
border-radius: 2px;
resize: none;
color: rgba(255, 165, 0, 0.5);
background-color: transparent;
z-index: 2;
caret-color: black;
}
#underlay{
overflow-x: hidden;
color: #555555;
background: #FFFFFF;
border-radius: 2px;
z-index: 1;
line-height: normal;
}
#underlay>p{
margin: 0;
}
#underlay>p:not(:last-child){
padding-bottom: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="underlay"></div>
<textarea id="textarea">Бегом марш! У месторождения кварцующихся фей без слёз хочется электрическую пыль.
Съел бы ёж лимонный пьезокварц, где электрическая юла яшму с туфом похищает.ddddddddddddddddddddddddddddddddddddddddddddddddddddddfdfdfdfdfdffdfdfdfdfdfdfd</textarea>
</div>
Этот же пример на JSFiddle.
word-break
у параграфа, приnormal
он не захочет рвать слова при переносе.