如何使用另一个 textarea 编辑 textarea 值？答案

【问题标题】：How to edit textarea value using another textarea?如何使用另一个 textarea 编辑 textarea 值？
【发布时间】：2020-02-17 21:38:15
【问题描述】：

我有一个 Textarea 框，其值为“一些初始内容” 我想使用另一个 Textarea 框来编辑它的值

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.myParagraphContent = "Some{{SecondTextareaContent}} initial content.";
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

<p>{{myParagraphContent}}</p>

<textarea ng-model="SecondTextareaContent"></textarea>
<textarea ng-model="myParagraphContent"></textarea>

</div>

【问题讨论】：

标签： javascript jquery angularjs angularjs-directive

【解决方案1】：

你可以这样做；

<div ng-app="myApp" ng-controller="myCtrl">

<p>{{myParagraphContent}}</p>

<textarea ng-model="SecondTextareaContent" ng-change='myParagraphContent=SecondTextareaContent'></textarea>
<textarea ng-model="myParagraphContent"  ></textarea>

</div>

如果你想在 ng-change 中也可以使用一些函数来执行。

【讨论】：

【解决方案2】：

更新

您可以改用 ngChange。查看演示here

对于 Javascript 部分：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
     $scope.SecondTextareaContent = '';
     $scope.myParagraphContent = 'Some initial content.';
     $scope.onChange = function() {
        $scope.myParagraphContent = 'Some ' + $scope.SecondTextareaContent + ' initial content.';
     };
});

对于 HTML 部分：

<textarea ng-model="SecondTextareaContent" ng-change="onChange()"></textarea>
<textarea ng-model="myParagraphContent"></textarea>

旧答案

对于 Javascript 部分：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
     $scope.SecondTextareaContent = '';
     $scope.myParagraphContent = 'Some initial content.';
     $scope.onKeyDown = function() {
        $scope.myParagraphContent = 'Some ' + $scope.SecondTextareaContent + ' initial content.';
     };
});

对于 HTML 部分：

<textarea ng-model="SecondTextareaContent" ng-keydown="onKeyDown()"></textarea>
<textarea ng-model="myParagraphContent"></textarea>

【讨论】：

不工作，当我输入 SecondTextareaContent 时，它的显示就像是段落：一些 ${$scope.SecondTextareaContent} 初始内容。
删除了模板文字。立即尝试
当我输入“demo”时，它只显示“dem”最后一个字符丢失
当只输入一个字符在 myParagraphContent 中没有得到任何值时

【解决方案3】：

我试图理解你。类似的东西？

const txt = document.querySelectorAll(".txt");
const setValue = () => {
  txt[1].value = txt[0].value;
}
txt[0].addEventListener("input", setValue, false);

<textarea class="txt"></textarea>
<textarea class="txt"></textarea>

【讨论】：