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

Posted 2023-05-09

【中文标题】如何使用另一个 textarea 编辑 textarea 值？

【英文标题】：How to edit textarea value using another textarea?

【发布时间】：2020-02-17 21:38:15

【问题描述】：

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

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) 
    $scope.myParagraphContent = "SomeSecondTextareaContent 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>

【参考方案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>