Mithril: растяните элементы , чтобы они соответствовали содержимому</h1> <nav style="font-size:0.9em;margin:25px 0px 0px 0px;" aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="/">Home</a></li> <li class="breadcrumb-item"><a href="/articles/">Публикации</a></li> <li class="breadcrumb-item active" aria-current="page">Mithril: растяните элементы <textarea>, чтобы они соответствовали содержимому</li> </ol> </nav> <div class="post-content"> <!-- Yandex.RTB R-A-2984256-1 --> <div id="yandex_rtb_R-A-2984256-1"></div> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-2984256-1", "renderTo": "yandex_rtb_R-A-2984256-1" }) }) </script> <div style="margin:25px 0px;border 1px solid silver;"><!-- Yandex.RTB R-A-2984256-1 --> <div id="yandex_rtb_R-A-2984256-1-1"></div> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-2984256-1", "renderTo": "yandex_rtb_R-A-2984256-1-1" }) }) </script></div><p>При создании HTML-элементов ‹<strong>textarea</strong>› вы можете захотеть, чтобы его высота соответствовала количеству содержимого внутри него. Например, если элемент ‹<strong>textarea</strong>› содержит 3 строки текстового содержимого, вы можете захотеть, чтобы ‹<strong>textarea</strong>› было 3 строки длиной, что будет `<strong> rows = «3»</strong> `в HTML или` <strong>height: 3em</strong> `в CSS.</p> <p>Проблема с элементами ‹<strong>textarea</strong>› в том, что количество их содержимого меняется. Я думал, что CSS может автоматически изменять размер элементов ‹<strong>textarea</strong>›, чтобы соответствовать их содержимому (например, `<strong>height: auto</strong>`), но это невозможно. В настоящее время. Однако это возможно с помощью JavaScript.</p> <div style="margin:25px 0px;border 1px solid silver;"><!-- Yandex.RTB R-A-2984256-1 --> <div id="yandex_rtb_R-A-2984256-1-2"></div> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-2984256-1", "renderTo": "yandex_rtb_R-A-2984256-1-2" }) }) </script></div> <p>Я нашел несколько замечательных примеров, в которых используются как jQuery, так и стандартные методы DOM: <br /><a target="_blank" href="http://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize/5346855#5346855">http://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize/5346855#5346855</a></p> <p>Я пытался сделать это с помощью Mithril, и, поскольку это довольно новый фреймворк / библиотека, я покажу, как я это сделал.</p> <p>Вот начальная настройка компонента Mithril, в котором используется элемент ‹<strong>textarea</strong>›.</p> <pre>m.route(document.body, '/', { '/': Text }); var Text = { controller: function() { var ctrl = this; ctrl.text = ''; }, view: function(ctrl) { return m('#Text', [ m('textarea.text-class[placeholder="Dime!"]', { value: ctrl.text, onchange: function(e) { e.preventDefault(); ctrl.text = e.currentTarget.value; } }), ]); } };</pre> <p>Во-первых, мы можем добавить прослушиватель событий к событию <a target="_blank" href="http://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize/5346855#5346855"><strong>keyup</strong>« и вставить одну из функций автоматического изменения размера, описанных в «ссылке</a> выше.</p> <pre>m.route(document.body, '/', { '/': Text }); var Text = { controller: function() { var ctrl = this; ctrl.text = ''; }, view: function(ctrl) { return m('#Text', [ m('textarea.text-class[placeholder="Dime!"]', { value: ctrl.text, onchange: function(e) { e.preventDefault(); ctrl.text = e.currentTarget.value; }, onkeyup: function(e) { e.preventDefault(); e.target.style.height = 'auto'; e.target.style.height = e.target.scrollHeight + 'px'; }), ]); } };</pre> <p>Это довольно легко реализовать. Однако в этом методе есть небольшая ошибка. Если исходный текст внутри элемента ‹<strong>textarea</strong>› не пуст, когда Mithril создает объект, он не будет автоматически изменять размер, поэтому сбоку появится полоса прокрутки. В Mithril вы можете редактировать элемент, как только он прикреплен к DOM, установив атрибут <a target="_blank" href="https://lhorie.github.io/mithril/mithril.html#the-config-attribute"><strong>config</strong></a> «, который чем-то похож на событие« <strong>oninit</strong> «. listener или метод <strong>getInitialState</strong> в React.</p> <pre>m.route(document.body, '/', { '/': Text }); var Text = { controller: function() { var ctrl = this; ctrl.text = 'this\nis\nsome\nlong\ntext\nwith\nno\npurpose'; }, view: function(ctrl) { return m('#Text', [ m('textarea.text-class[placeholder="Dime!"]', { value: ctrl.text, onchange: function(e) { e.preventDefault(); ctrl.text = e.currentTarget.value; }, config: function(el, isInitialized, context) { if ( ! isInitialized ) { el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px'; } }, onkeyup: function(e) { e.preventDefault(); e.target.style.height = 'auto'; e.target.style.height = e.target.scrollHeight + 'px'; }), ]); } };</pre> <p>Затем, чтобы немного очистить это, мы можем выделить логику автоматического изменения размера в отдельную функцию.</p> <div style="margin:25px 0px;border 1px solid silver;"><!-- Yandex.RTB R-A-2984256-1 --> <div id="yandex_rtb_R-A-2984256-1-3"></div> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-2984256-1", "renderTo": "yandex_rtb_R-A-2984256-1-3" }) }) </script></div> <pre>m.route(document.body, '/', { '/': Text }); var Text = { controller: function() { var ctrl = this; ctrl.text = 'this\nis\nsome\nlong\ntext\nwith\nno\npurpose'; }, view: function(ctrl) { return m('#Text', [ m('textarea.text-class[placeholder="Dime!"]', { value: ctrl.text, onchange: function(e) { e.preventDefault(); ctrl.text = e.currentTarget.value; }, config: function(el, isInitialized, context) { if ( ! isInitialized ) { autoResizeTextarea(el); } }, onkeyup: function(e) { e.preventDefault(); autoResizeTextarea(e.target); }), ]); } }; function autoResizeTextarea(el) { el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px'; }</pre> <p>Чтобы сделать это еще интереснее, вот пример использования некоторых вспомогательных функций, которые я использую повсюду с Mithril:</p><pre>m.route(document.body, '/', { '/': Text }); var Text = { controller: function() { var ctrl = this; ctrl.text = 'this\nis\nsome\nlong\ntext\nwith\nno\npurpose'; }, view: function(ctrl) { return m('#Text', [ m('textarea.text-class[placeholder="Dime!"]', { value: ctrl.text, onchange: function(e) { e.preventDefault(); ctrl.text = e.currentTarget.value; }, config: initEl(autoResizeTextarea), onkeyup: editEl(autoResizeTextarea) } ]); } }; function initEl(cb) { return function(el, isInitialized, context) { if ( ! isInitialized ) { cb(el); } }; } function editEl(cb) { return function(e) { e.preventDefault(); cb(e.target); }; } function autoResizeTextarea(el) { el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px'; }</pre> </div> <div class="row"> <div class="col-sm-6"> <a class="btn btn-primary btn-sm" href="/tag/javascript/">JavaScript</a> <a class="btn btn-primary btn-sm" href="/tag/mithril/">Mithril</a> <a class="btn btn-primary btn-sm" href="/tag/textarea/">Textarea</a> </div> <div class="col-sm-6 text-right"> <i style="font-size: 20px;" class="material-icons inline-icon">schedule</i> <span style="font-size:0.9em;">17.06.2022</span> </div> </div> </div> </div> </div> <div id="sidebar-right" class="col-sm-2"> <div class="sidebar-block"> <ul class="related-questions"> <h4>Вопросы по теме</h4> <li><a href="/questions/36627610/">Как правильно переопределить недоступный HTML-контент с помощью CSS?</a></li> <li><a href="/questions/29522002/">Emacs тормозит и создает 0-байтовые файлы в рабочем каталоге</a></li> <li><a href="/questions/11496272/">Скрытое переполнение элементов с переменной высотой?</a></li> <li><a href="/questions/61996564/">отправить электронное письмо в качестве параметра в URL-адресе в ошибке Rails</a></li> <li><a href="/questions/53814478/">Ханойские башни с использованием списков Prolog</a></li> <li><a href="/questions/51053099/">Хранение подписей в кодировке base64 в базе данных</a></li> <li><a href="/questions/38479625/">Редактирование CSV-файла — удаление всей строки похожих значений на основе условия VIA Powershell</a></li> <li><a href="/questions/66136047/">Как начать новый подсчет, когда значение категориальной переменной изменилось в R</a></li> <li><a href="/questions/40134898/">Настройте параметры прокси-сервера HTTP в инструменте командной строки Android</a></li> <li><a href="/questions/59074700/">Разбор кода JavaScript в модуле Node.js</a></li> <li><a href="/questions/40700748/">Почему в С++ возврат указателя частной переменной разных объектов приводит к ошибке сегментации?</a></li> <li><a href="/questions/48536916/">Рассчитать минимальное, максимальное и среднее значение в столбце данных</a></li> <li><a href="/questions/55757250/">Как применить несколько фильтров в таблице данных угловых материалов?</a></li> <li><a href="/questions/14067113/">Конфигурация конкретного узла в JBoss Clustering</a></li> <li><a href="/questions/55664475/">Подчеркивания не считываются компонентом сценария в службах интеграции Microsoft</a></li> <li><a href="/questions/19102644/">как настроить struts2 с помощью tomcat и apache с mod_jk?</a></li> <li><a href="/questions/57733929/">Как использовать REST API RSA Archer для получения отчета?</a></li> <li><a href="/questions/23858961/">JMH: не учитывать время внутреннего метода</a></li> <li><a href="/questions/32336863/">Время жизни временного объекта, связанного с константной ссылкой (цепочка методов)</a></li> <li><a href="/questions/34803516/">фильтр сканирования по подстроке</a></li> </ul> </div> </div> </div> </div> </div> <div id="footer" class="container-fluid"> <div class="row"> <div class="col-sm-2"></div> <div class="col-sm-8"> (c) 2024 - digitrain.ru </div> <div class="col-sm-2 text-center"> <!--LiveInternet counter--><a href="https://www.liveinternet.ru/click" target="_blank"><img id="licnt555B" width="88" height="31" style="border:0" title="LiveInternet" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAEALAAAAAABAAEAAAIBTAA7" alt=""/></a><script>(function(d,s){d.getElementById("licnt555B").src= "https://counter.yadro.ru/hit?t57.6;r"+escape(d.referrer)+ ((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+ (s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+ ";h"+escape(d.title.substring(0,150))+";"+Math.random()}) (document,screen)</script><!--/LiveInternet--> <br><br> </div> </div> </div> </body> </html>