ionic3 - ionic 3 textarea自动调整大小（而非ion-textarea）

我需要为自动调整大小（弹性）。我需要使用<textarea>，不能将<ion-textarea>用于其他问题。</p> <p>我正在关注：<a href="https://stackoverflow.com/questions/47547571/how-to-autoresize-the-ion-input-field-vertically-while-i-am-typing?answertab=active">How to autoresize the ion-input field vertically while i am typing</a>和<a href="https://stackblitz.com/edit/expandable-input" rel="nofollow noreferrer">https://stackblitz.com/edit/expandable-input</a> </p> <p> <ion-textarea>正在工作：</p> <pre><code>@Directive({ selector: 'ion-textarea[autosize]' }) </code></pre> <p>但是，不是<textarea> </p> <pre><code>@Directive({ selector: 'textarea[autosize]' }) </code></pre> <p>这是我的Stackblitz（自动调整大小无效）：<a href="https://stackblitz.com/edit/expandable-input-htjncw" rel="nofollow noreferrer">https://stackblitz.com/edit/expandable-input-htjncw</a> </p> <p>控制台错误：“错误TypeError：无法读取未定义的属性'style'...” </p> <p>代码：</p> <pre><code>adjust():void { const textArea = this.element.nativeElement.getElementsByTagName('textarea')[0]; textArea.style.overflow = 'hidden'; textArea.style.height = 'auto'; textArea.style.height = textArea.scrollHeight + 'px'; } </code></pre> </div> <div class="answer-list"> <h4>1 个答案:</h4> <div class="hr-line-dashed"></div> <p>答案 0 :(得分：0)</p> <div class="answer markdown-body"> <p>如果将指令添加到<code>textarea</code>而不是ion-textarea，则可以直接从<code>nativeElement</code>访问html元素。您不会通过<code>getElementsByTagName</code> </p>访问 <pre><code>adjust():void { const textArea = this.element.nativeElement; textArea.style.overflow = 'hidden'; textArea.style.height = 'auto'; textArea.style.height = textArea.scrollHeight + 'px'; } </code></pre> </div> </div> </div> <div class="right"> <div style="height:400px"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6263610230477973" data-ad-slot="2820756182" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div style="height:20px"></div> <div class="releated-question-wrapper"> <div class="header"> 相关问题 </div> <div class="hr-line-dashed"></div> <ul> <li> <a href="/q/10117141">自动调整textarea宽度（cols）？</a> </li> <li> <a href="/q/17206702">使用原型自动调整textarea？</a> </li> <li> <a href="/q/28147478">添加离子侧菜单后未显示离子含量</a> </li> <li> <a href="/q/41705924">离子项内的离子 - textarea不能在IONIC 2上工作</a> </li> <li> <a href="/q/42827746">在angular2中自动调整textarea</a> </li> <li> <a href="/q/44819033">离子3将ID绑定到<ion-textarea></a> </li> <li> <a href="/q/50296585">ion-textarea将离子头一直推到顶部并隐藏它</a> </li> <li> <a href="/q/50636377">如何检查ion-textarea的最小长度</a> </li> <li> <a href="/q/54512068">ionic 3 textarea自动调整大小（而非ion-textarea）</a> </li> <li> <a href="/q/56551959">离子文本区Ionic 4中的设置值</a> </li> </ul> </div> <div class="releated-question-wrapper"> <div class="header"> 最新问题 </div> <div class="hr-line-dashed"></div> <ul> <li> <a href="/q/68614764">我写了这段代码，但我无法理解我的错误</a> </li> <li> <a href="/q/68614678">我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？</a> </li> <li> <a href="/q/68614175">是否有可能使 loadstring 不可能等于打印？卢阿</a> </li> <li> <a href="/q/68614313">java中的random.expovariate()</a> </li> <li> <a href="/q/68614125">Appscript 通过会议在 Google 日历中发送电子邮件和创建活动</a> </li> <li> <a href="/q/68615109">为什么我的 Onclick 箭头功能在 React 中不起作用？</a> </li> <li> <a href="/q/68615123">在此代码中是否有使用“this”的替代方法？</a> </li> <li> <a href="/q/68614097">在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化</a> </li> <li> <a href="/q/68614427">每千个数字得到</a> </li> <li> <a href="/q/68615239">更新了城市边界 KML 文件的来源？</a> </li> </ul> </div> <div class=""> </div> </div> </div> <div> <script> var host = window.location.host; if (host =="www.thinbug.com"){ (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); } </script> </body> </html>