How to edit textarea value using another textarea?

how to print value in textarea using javascript
how to save textarea value in html
how to display html content in textarea using javascript
get textarea value javascript
set textarea value jquery
textarea selectionstart
how to display data in textarea using javascript
textarea onchange

I have one Textarea box having its value "some initial content" I want to edit its value using another Textarea box

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>

you can do something like this;

<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>

also if you want in the ng-change you can use some function to execute.

HTML DOM Textarea value Property, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Given an HTML document containing a <textarea> element and the task is to change the content of a <textarea> element with the help of JavaScript. Method 1: This method uses id attribute of textarea with value property to change the content of <textarea> element.

Update

You can use ngChange instead. Check the demo here

For the Javascript part:

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.';
     };
});

For the HTML part:

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

Old Answer

For the Javascript part:

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.';
     };
});

For the HTML part:

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

How to set or update value of textarea with JavaScript/jQuery , In this post, we will see how to set or update value of textarea with JavaScript and jQuery. Edit in JSFiddle. The innerText property will Another good solution is to use the .val() method to set the text value of textarea element. JS; HTML  Definition and Usage. The value property sets or returns the contents of a text area. Note: The value of a text area is the text between the <textarea> and </textarea> tags.

I tried to understand you. something like that ?

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>

How to change the Content of a <textarea> using JavaScript , Method 1: This method uses id attribute of textarea with value property to change the content of <textarea> element. JavaScript code is written within the <script>  However, while using NicEdit on a textarea, you will have to take some other step in order to get the content of the textarea - as to whatever the user has entered. You may think, you can easily get the content entered in the textarea WYSIWYG editor of NicEdit in two ways: Using jQuery. var notes = $("div.nicEdit-main").html();

HTMLTextAreaElement, The HTMLTextAreaElement interface provides special properties and indicating that the user cannot modify the value of the control. This method reports the problems with the constraints on the element, if any, to the user. Specifies a name for a text area: placeholder: text: Specifies a short hint that describes the expected value of a text area: readonly: readonly: Specifies that a text area should be read-only: required: required: Specifies that a text area is required/must be filled out: rows: number: Specifies the visible number of lines in a text area: wrap

<textarea>, The HTML textarea element represents a multi-line plain-text editing control, off : The user must explicitly enter a value into this field for every use, Compared to other form elements it is relatively easy to style, with its box  Developing selenium tests I've faced with issue that I'm not able to get value neither from textarea nor from textfield and it's kinda obvious because html tag itself doesn't have this value neither in attribute values nor in value field, here is an example from Vaadin Sampler:

How to Use the Text Area, Filters in the text area can also be set up to use a different filtering scheme than the For example, this could be a calculated value displaying the total sum of sales. Comment: You can also right-click in the text area and select Edit Text Area  Edit in JSFiddle Alternatively, you can use jQuery’s.html () method which uses the browser’s innerHTML property to completely replace textarea’s content with the new content. Another good solution is to use the.val () method to set the text value of textarea element.

Comments
  • not working, when i type in SecondTextareaContent its showing like that is parragraph: Some ${$scope.SecondTextareaContent} initial content.
  • Removed the template literal. Try it now
  • when I type 'demo' it only shows 'dem' last character is missing
  • when type only one character not getting any value in myParagraphContent