увеличить размер textArea программно

Я могу увеличить размер текстового поля в соответствии с количеством строк, но предположим, что я не нажимал enter и просто вводил текст, тогда он не работает, и размер текстового поля не работает. См. Следующий скрипт.увеличить размер textArea программно

$("textarea").on("keyup", function($event) { 
 
     this.rows = (this.value.split("\n").length||1); 
 
     var thisTextArea = $event.currentTarget; 
 
       if (thisTextArea.value.split("\n").length > 5) { 
 
        thisTextArea.rows = (thisTextArea.value.split("\n").length); 
 
        $(thisTextArea).css("overflow-y","hidden"); 
 
        if (thisTextArea.rows > 15) { 
 
         $(thisTextArea).css("overflow-y","scroll"); 
 
        } 
 
       } 
 
       else { 
 
        thisTextArea.rows = 6; 
 
        $(thisTextArea).css("overflow-y","hidden"); 
 
       } 
 
    });

<textarea rows="5"></textarea>

Fiddle Link

источник

2015-05-26 Sunil Madan

Я не хочу, чтобы поставить дополнительные JS-файлы. –

Почему бы вам просто не использовать 'div' или другой тег с атрибутом' contenteditable = 'true''? – Arvind

https://github.com/mbklein/jquery-elastic/blob/master/index.html

$(document).ready(function() { 
 
    $('textarea').elastic(); 
 
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <title>Demo - Elastic</title> 
 
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> 
 
    <link href="https://raw.githubusercontent.com/mbklein/jquery-elastic/master/dependencies/screen.css" type="text/css" rel="stylesheet" /> 
 
</head> 
 

 
<body> 
 

 
    <div class="form"> 
 
    <p> 
 
     <label>Fill the textarea to make it grow</label> 
 
     <span class="w"> 
 
\t \t \t \t \t <textarea class="input">This textarea is going to grow when you fill it with text. Just type a few more words in it and you will see.</textarea> 
 
\t \t \t \t </span> 
 
    </p> 
 
    </div> 
 
    <script src="https://raw.githubusercontent.com/mbklein/jquery-elastic/master/jquery.elastic.js" type="text/javascript"></script> 
 

 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</body> 
 

 
</html>

источник

2015-05-26 05:09:30

Он показывает прокрутку, текст идет вверх, а не расширяется текстовая область. –

Загрузите и запустите его, потому что скрипты не загружаются –

Обновление HTML

<textarea rows="5" cols="15"></textarea>

Используйте этот Js сниппет

$("textarea").on("keyup", function($event) { 
    var textarea = $(this); 
    var text = textarea.val(); 
    var lines = text.split(/\r*\n/); 
    var cols = textarea.attr('cols'); 
    var TOTAL_LINES = 0; 
    for (var i = 0; i < lines.length; i++) { 
     TOTAL_LINES += Math.ceil(lines[i].length/cols); 
    }  
    console.log(TOTAL_LINES); 
    if (TOTAL_LINES > 5) { 
     textarea.attr('rows', TOTAL_LINES); 
     textarea.css("overflow-y","hidden"); 
     if (TOTAL_LINES > 15) { 
      textarea.css("overflow-y","scroll"); 
     } 
    } else { 
     textarea.attr('rows', 6); 
     textarea.css("overflow-y","hidden"); 
    } 
});

источник

2015-05-26 05:15:24

Это не работает. Тот же вопрос о том, в чем вопрос. –

Проблема заключается в том, что мы не можем считать автоматические разрывы строк. для этого вам необходимо установить атрибут cols в textarea и делить charecters textarea на количество столбцов. проверить эту скрипку https://jsfiddle.net/ashish1bhagat/0vh90ka4/4/ –

все работает нормально, но первая строка становится скрытой, когда нет. строки превышают и автоматически показывают снова. –

$(document) 
    .one('focus.textarea', '.autoExpand', function(){ 
     var savedValue = this.value; 
     this.value = ''; 
     this.baseScrollHeight = this.scrollHeight; 
     this.value = savedValue; 
    }) 
    .on('input.textarea', '.autoExpand', function(){ 
     var minRows = this.getAttribute('data-min-rows')|0, 
      rows; 
     this.rows = minRows; 
     rows = Math.ceil((this.scrollHeight - this.baseScrollHeight)/16); 
     this.rows = minRows + rows; 
    });

HTML

<textarea rows="5"class='autoExpand'></textarea>

CSS

textarea{ 
    display:block; 
    box-sizing: padding-box; 
    overflow:hidden; 

    padding:10px; 
    width:250px; 
    font-size:14px; 
    margin:50px auto; 
    border-radius:8px; 
    border:6px solid #556677; 
}

link here

источник

2015-05-26 05:27:03 Rasel

Такая же проблема, когда мы печатаем длинную строку без нажатия клавиши ввода, она не работает. –

еще раз проверьте ссылку и нажмите текст более длинный time.it проверено – Rasel

нажмите не менее 10 строк – Rasel

Finalaly Я сделал этот путь. См. Следующую ссылку.

$("textarea").on("keyup",function($event) { 
       var textarea = $event.currentTarget; 

    if (textarea.scrollHeight > 305) { 
      textarea.style.height = "1px"; 
    textarea.style.height = (3+textarea.scrollHeight)+"px"; 
     $(textarea).css("overflow-y","scroll"); 

    } 
    else if (textarea.scrollHeight > 105){ 
     $(textarea).css("overflow-y","hidden"); 
     textarea.style.height = "1px"; 
     textarea.style.height = (3+textarea.scrollHeight)+"px"; 
    } 
       }); 
$("textarea").on("focus",function($event) { 
    var textarea = $event.currentTarget; 
     if (textarea.scrollHeight > 105) { 
      //textarea.style.height = textarea.scrollHeight; 
      $(textarea).css("height",textarea.scrollHeight); 
      if(textarea.scrollHeight > 305) { 
      $(textarea).css("overflow-y","scroll"); 
      } 
     } 
    $("textarea").unbind("focus"); 

});

https://jsfiddle.net/xwkw3a2r/1/

источник

2015-05-27 08:59:51

увеличить размер textArea программно

ответ

Смежные вопросы