textarea возможно ли отслеживать в этом блоке изменения
Вот я могу сделать нужное количество столбцов и рядов. Но если количество символов будет превышать будет появляться прокрутка.
А как сделать что бы когда идет превышение количество символов скрипт поменял добавил нужно количество рядов <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <textarea name="comment" cols="20" rows="2"></textarea> <script> </script> </body> </html> |
Цитата:
|
Увеличить - просто: смотришь что scrollHeight больше чем высота самого блока и увеличиваешь её до нужного значения. А вот ужать обратно - это уже извращаться надо.)
|
рони,
да строк я просто так всегда называл ряды, строк |
Aetae,
там же не в пикселях строки в значениях cols="20" rows="2" или можно писать в пикселях |
textarea auto height
Сергей Ракипов,
по запросу из инета первые варианты ... <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> textarea { resize: none; overflow: hidden; min-height: 24px; } </style> <script> function auto_grow(element) { element.style.height = "5px"; element.style.height = (element.scrollHeight) + "px"; } </script> </head> <body> <textarea oninput="auto_grow(this)" rows="2"></textarea> </body> </html> <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> *, *::before, *::after { box-sizing: border-box; } .input-sizer { display: inline-grid; position: relative; border: solid 1px; } .input-sizer.stacked { align-items: stretch; } .input-sizer.stacked::after, .input-sizer.stacked textarea { width: auto; min-width: 1em; grid-area: 1/2; font: inherit; padding: 0.25em; margin: 0; resize: none; background: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; } .input-sizer::after { content: attr(data-value) " "; visibility: hidden; white-space: pre-wrap; } .input-sizer:focus-within textarea:focus, { outline: none; } </style> </head> <body> <label class="input-sizer stacked"> <textarea oninput="this.parentNode.dataset.value = this.value" rows="2" placeholder="hi"></textarea> </label> </body> </html> |
рони,
Спасибо я просто не знал как спросить у интернета вообще не подумал что там размер может мерися в пикселях. Спасибо:) |
Все увидел по запросу
textarea auto height |
Часовой пояс GMT +3, время: 00:18. |