2

То, что Вы видите на рисунке - прозрачная 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.

6
  • 1
    сделайте сниппет повторяющий проблему, не хочется делать это за вас.
    – zb'
    1 мая 2017 в 4:41
  • Пордон... Понадобится время, но сделаю. 1 мая 2017 в 5:01
  • небольшая рекомендация для сниппета - чтобы у всех все одинаково было, зафиксируйте ширину body пикселями и пропишите font аттрибуты.
    – zb'
    1 мая 2017 в 5:03
  • Сделал всё, как Вы сказали. 1 мая 2017 в 5:56
  • 1
    Проверьте word-break у параграфа, при normal он не захочет рвать слова при переносе.
    – br3t
    1 мая 2017 в 6:00

1 ответ 1

3

Длинное слово в блоке не переносится на вторую строку. Если бы блоку не было задано overflow-x: hidden;, у него появилась бы горизонтальная прокрутка, и это стало бы заметнее.

Добавьте диву word-wrap: break-word;:

Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область.

$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;
    word-wrap: break-word; /* добавил свойство */
}

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

1
  • Всё работает, благодарю Вас за ответ! Все бы проблемы так просто решались xD 1 мая 2017 в 6:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.