标签： angular angular-material textarea
我有一个（我正在使用角度2材质），如下所示，并且正在按Enter键调用一个功能。从功能上来说，它可以正常工作，但是，从用户体验的角度来看-按下Enter键后，文本框的大小仍在变化-即，在提交功能清除表单之前，文本区域中会显示新行。如何停止Enter键来更改文本区域的大小？</p> <pre><code><mat-form-field class="mat-form-field mat-form-field--no-padding" appearance="outline" color="Primary"> <textarea (keyup.enter)="onKey($event, formGroupDirective)" matInput placeholder="do something" type="text" formControlName="message" required cdkTextareaAutosize #autosize="cdkTextareaAutosize" cdkAutosizeMinRows="1" cdkAutosizeMaxRows="5"></textarea>> </code></pre> <pre><code>onKey(event, formGroupDirective: FormGroupDirective) { event.preventDefault() this.doSomething(formGroupDirective) } </code></pre> <p>之前： <a href="https://i.stack.imgur.com/4q9ff.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4q9ff.png" alt="Starting/reset textarea"/></a> </p> <p>按Enter键后： <a href="https://i.stack.imgur.com/d1VcC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d1VcC.png" alt="textarea after pressing enter key"/></a> </p> </div> <div class="answer-list"> <h4>1 个答案:</h4> <div class="hr-line-dashed"></div> <p>答案 0 :(得分：0)</p> <div class="answer markdown-body"> <p> <a href="https://stackoverflow.com/a/40656449/7037600">https://stackoverflow.com/a/40656449/7037600</a> </p> <p>似乎输入也由表单处理。在实施上方链接中列出的解决方案后，问题得到解决。</p> </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/22488919">按Enter键在文本区域后，防止跳到第二行</a> </li> <li> <a href="/q/43887701">如何更改材质中的md-icon大小</a> </li> <li> <a href="/q/46134836">角度材质2改变字体大小</a> </li> <li> <a href="/q/47256849">材质2在Mat-Toolbar中更改字体大小</a> </li> <li> <a href="/q/47828941">防止chrome更改文本大小</a> </li> <li> <a href="/q/50938113">如何在Angular Dart中创建材质文本区域？</a> </li> <li> <a href="/q/55794090">材质对话框更改文本大小</a> </li> <li> <a href="/q/59302632">更改“材质滑块”的拇指大小</a> </li> <li> <a href="/q/60478255">Angular 2材质-如何防止Enter键更改文本区域的大小</a> </li> <li> <a href="/q/60784677">Angular材质自动调整文本区域大小的问题，</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>