Enter键上的AngularJS textarea换行符 [英] AngularJS textarea newline on enter key

问题描述

我正在开发AngularJS应用程序，就像我们在stackoverflow上发布答案和问题的方式一样，我们可以在文本区域的下方实时预览答案或问题.

I am developing an AngularJS application same like how we post answers and questions on stackoverflow and we get live preview of our answers or question just below the textarea.

这是我的试用代码:

index.html-

<div ng-app="bindHtmlExample" ng-controller="ExampleController">
        <textarea ng-model="myHTML"></textarea>
        <div ng-bind-html="myHTML"></div>
</div>

script.js-

(function(angular) {
  'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.myHTML =
       'I am an <code>HTML</code>string with ' +
       '<a href="#">links!</a> and other <em>stuff</em>';
  }]);
})(window.angular);

当用户在文本区域中键入任何内容时，用户可以实时预览自己在<div ng-bind-html="myHTML"></div>中键入的内容. 当用户键入任何HTML代码时，它将显示真实的HTML输出.

When user types anything in the textarea, user can see live preview of what he/she is typing in the <div ng-bind-html="myHTML"></div>. When user types any HTML code, it will show real HTML output.

我已经做到了.

所以，我的问题是，当用户在文本区域中按enter key时，必须在<div ng-bind-html="myHTML"></div>中开始换行符.

So, my problem is when user presses enter key in textarea, newline must get started in <div ng-bind-html="myHTML"></div>.

我该怎么做?

这是我的wordpress网站的屏幕截图，您会知道到底是什么我想要...

Here is the Screenshot of my wordpress website, you will get an idea what exactly I want...

推荐答案

那是因为textarea中的换行符不是HTML换行符.您需要将其替换为以下内容:

Thats because newlines in the textarea are not HTML line breaks. You need to replace them with something like this:

$(document).ready(function() {
  var pad = $('#pad');
  var board = $('#board');

  pad.keypress(function(event) {
    board.html(pad.val().replace(/\r?\n/g, '<br />'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="pad"></textarea>
<div id="board"></div>

这篇关于Enter键上的AngularJS textarea换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！