Отображать все строки текста без прокрутки

Как я могу отобразить все строки textarea вместо того, чтобы иметь эту вертикальную прокрутку. Я пытался с CSS, используя min-height и max-height и height: auto, но не работает.

.form-control{
    width:400px;
    min-height: 100px;
    max-height: 900px;
    height: auto;}

Я действительно не знаю, возможно ли сделать это с помощью CSS.

Может быть, это возможно с родным JavaScript, поэтому я пытаюсь что-то вроде этого

function expandtext(expand) {
    while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
        console.log("display all rows!")>
    }
}

Здесь я нахожу что-то хорошее, но оно только увеличивает и уменьшает количество строк, так как я могу отобразить все строки textarea без использования прокрутки. НЕ НУЖДАЕТСЯ В РЕШЕНИИ С ФИКСИРОВАННОЙ ВЫСОТОЙ, НЕОБХОДИМОЙ ДИНАМИЧНОЙ или других решениях, которые работают только в браузере Chrome или только в Firefox, таких как Object.observe().

демонстрация 

function expandtext(expand) {
  while (expand.rows > 1 && expand.scrollHeight < expand.offsetHeight) {
    console.log("display all rows!") >
  }
}
body {
  padding: 20px;
}
.form-control {
  width: 400px;
  min-height: 100px;
  max-height: 900px;
  height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class=" form-group">
  <label>remove texarea scroll and display all rows</label>
  <textarea class="form-control" rows="4" onkeydown="expandtext(this);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut. Vestibulum ante ipsum
    primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue congue purus, quis imperdiet tellus ornare in. Nulla facilisi. Nulla elementum posuere odio ut ultricies. Nullam tempus tincidunt elit eget posuere. Pellentesque sit amet
    tellus sapien. Praesent sed iaculis turpis. Nam quis nibh diam, sed mattis orci. Nullam ornare adipiscing congue. In est orci, consectetur in feugiat non, consequat vitae dui. Mauris varius dui a dolor convallis iaculis.</textarea>
</div>
<div class=" form-group">
  <label>remove texarea scroll and display all rows</label>
  <textarea class="form-control" rows="4" onkeydown="expandtext(this);">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut.</textarea>
</div>

Внешний JSFiddle.

Источник

4 ответа

Решение

Простое решение jQuery:

$(function() {
    $('textarea').each(function() {
        $(this).height($(this).prop('scrollHeight'));
    });
});

Проверьте скрипку.

Поскольку вам нужно простое решение JavaScript, используйте следующий скрипт, который был создан panzi. Вы можете просмотреть оригинальный ответ здесь.

var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on'+event, handler);
    };
}
else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}
function init () {
    var text = document.getElementById('textarea');
    function resize () {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change',  resize);
    observe(text, 'cut',     delayedResize);
    observe(text, 'paste',   delayedResize);
    observe(text, 'drop',    delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();
}

Проверьте скрипку здесь.

Источник

Никакого JavaScript не требуется.

Вы можете отобразить редактируемую текстовую область без прокрутки (т. Е. Автоматически изменяющей размер) со следующими HTML и CSS:

.textarea {
width:250px;
min-height:50px;
height:auto;
border:2px solid rgba(63,63,63,1);}
<div class="textarea" contenteditable="true">

Источник

В Mozilla Developer Network есть пример Autogrowing textarea HTMLTextAreaElement стр. Вы должны обязательно это проверить, если хотите держаться подальше от CSS3-решений, которые могут сломаться в старых браузерах.

Вот код из примера.

В следующем примере показано, как заставить текстовую область действительно расти автоматически при наборе текста.

function autoGrow(oField) {
  if (oField.scrollHeight > oField.clientHeight) {
    oField.style.height = oField.scrollHeight + "px";
  }
}
textarea.noscrollbars {
  overflow: hidden;
  width: 300px;
  height: 100px;
}
<form name="myForm">
  <fieldset>
    <legend>Your comments</legend>
    <p>
      <textarea class="noscrollbars" onkeyup="autoGrow(this);"></textarea>
    </p>
    <p>
      <input type="submit" value="Send" />
    </p>
  </fieldset>
</form>

Автокорректировка

Этот пример позаботится о случае, когда вы удаляете строки.

function autoAdjustTextArea(o) {
  o.style.height = '1px'; // Prevent height from growing when deleting lines.
  o.style.height = o.scrollHeight + 'px';
}


// =============================== IGNORE =====================================
// You can ignore this, this is for generating the random characters above.
var chars = '\n abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');
var randRange=function(min,max){return max==null?randRange(0,min):~~(Math.random()*(max-min)+min);}
var randChars=function(chrs,len){return len>0?chrs[randRange(chrs.length)]+randChars(chrs,len-1):'';}
// ============================== /IGNORE =====================================


// Get a reference to the text area.
var txtAra = document.getElementsByClassName('noscrollbars')[0];
// Generate some random characters of length between 150 and 300.
txtAra.value = randChars(chars,randRange(150,300));
// Trigger the event.
autoAdjustTextArea(txtAra);
textarea.noscrollbars {
  overflow: hidden;
  width: 400px; /** This is via your example. */
}
<form name="myForm">
  <fieldset>
    <legend>Your comments</legend>
    <p>
      <textarea class="noscrollbars" onkeyup="autoAdjustTextArea(this);"></textarea>
    </p>
    <p>
      <input type="submit" value="Send" />
    </p>
  </fieldset>
</form>

Источник

Используя Jquery и некоторую логику, я попытался сделать то, что вам нужно. Вот jsfiddle; https://jsfiddle.net/45zsdzds/

HTML:

<textarea class="myClass" id="FurnishingDetails" name="FurnishingDetails" id="FurnishingDetails"></textarea>

Javascript:

$('#FurnishingDetails').text('hello\nhello1\nhello2\nhello3\nhello4\nhello5');
String.prototype.lines = function() { return $('#FurnishingDetails').text().split(/\r*\n/); }
String.prototype.lineCount = function() { return $('#FurnishingDetails').text().lines().length; }
$('#FurnishingDetails').css('height', ($('#FurnishingDetails').text().lineCount() + 1) + 'em');

CSS:

textarea[name='FurnishingDetails']{
 height:2em;  
}

Используется Как получить количество строк в текстовой области? добавить Stor прототипа Inorder, чтобы получить linecount.

Источник
Другие вопросы по тегам