如何使输入显示在输出上

how to make enter on input show up on output

本文关键字：输出 显示 何使 输入      更新时间：2023-09-26

当用户在输入框中按enter键时，我希望这反映在H1标记中。

可以看到当用户键入时1号线他们可以按回车键并创建输入的第2行没有问题，但h1标签的输出仍然是"第1行第2行"，全部在一行上。

请看看小提琴，这样会更有意义。

我在考虑使用一个按键功能来获取当用户按下回车键，然后用它做些什么?我不确定是否有更好的方法。

https://jsfiddle.net/BSmyth634/ovz8thrp/

<div ng-app>
   <form>
     <textarea rows="4" type="text" ng-model="todoText" size="30" placeholder="add new todo here">
     </textarea>
   </form>
   <h1>
    {{todoText || 'Hello World'}}
   </h1>
</div>

你需要在你的代码中使用style="white-space: pre;"。

JS小提琴

我认为有两种方法可以实现你想要的。

  • 使用white-space css属性。在你的情况下，pre-line值可能会很有趣。
  • 创建Angular的过滤器并使用它。

可以用pre element代替h1

<pre>{{todoText || 'Hello World'}}</pre>

或者使用

<h1 ng-repeat="line in todoText.split(''n')">
    {{line}}
</h1>

Jquery方法 

$("textarea").on('keypress',function(e){
    if(e.keyCode == 13){
        $('h1').html($("textarea").val())
    }
})
相关文章：