How to link input with textarea?

with

For example:

There is a <textarea> field, it is already...">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<body>
  
  <nav class="page-headings-container js-page-headings-container"></nav>
  <div class="tools-bar js-tools-bar">
    
    <a class="js-list-of-headings-button" data-state="closed" href="#" title="Headings">📜</a>
    <a class="js-go-to-top-button" href="#" title="Go to Top">⬆️</a>
    <a class="js-go-to-bottom-button" href="#" title="Go to Bottom">⬇️</a>
  </div>
  <section class="page js-page"><div itemprop="mainEntity" itemscope="" itemtype="http://schema.org/Question"><link itemprop="image" href="https://cdn.sstatic.net/Sites/ru/img/apple-touch-icon.png?v=0dd80f442adc"><div class="inner-content clearfix"><div id="question-header" class="grid"><h1 itemprop="name" class="grid--cell fs-headline1 fl1 ow-break-word">  <a href="https://ru.stackoverflow.com/questions/206207/%25D0%259A%25D0%25B0%25D0%25BA-%25D1%2581%25D0%25B2%25D1%258F%25D0%25B7%25D0%25B0%25D1%2582%25D1%258C-input-%25D1%2581-textarea" class="question-hyperlink">How to link input with textarea?</a> </h1></div><div id="mainbar" role="main" aria-label="question and answers"><div class="question" data-questionid="206207" id="question"><style>.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{                margin-bottom:0;
}</style><div id="dfp-tlb" class="everyonelovesstackoverflow everyoneloves__top-leaderboard" style="min-height: auto; height: auto; display: none;"></div><div class="post-layout"><div class="postcell post-layout--right"><div class="post-text" itemprop="text"><p> How to connect <code><input type="text"></code> with <code><textarea></code> ? </p><p>  For example: </p><p>  There is a <code><textarea></code> field, it is already filled, say this (this text is inside <code>textarea=500</code> ). <br>  Below is the <code><input type="text"></code> field inside filled (500). <br>  How to make it so that if I write any number inside <code><input type="text"></code> for example 700, then it would replace 500 which is inside <code><textarea></code> and it becomes so (this is what is inside <code>textarea=700</code> )? </p></div><div class="post-taglist grid gs4 gsy fd-column"><div class="grid ps-relative d-block">  <a href="https://ru.stackoverflow.com/questions/tagged/html" class="post-tag" title="show questions tagged with [html]" rel="tag">html</a> <a href="https://ru.stackoverflow.com/questions/tagged/%25D0%25B2%25D1%2591%25D1%2580%25D1%2581%25D1%2582%25D0%25BA%25D0%25B0" class="post-tag" title="show questions with tags [layout]" rel="tag">layout</a> <a href="https://ru.stackoverflow.com/questions/tagged/text" class="post-tag" title="show questions tagged [text]" rel="tag">text</a> <a href="https://ru.stackoverflow.com/questions/tagged/textarea" class="post-tag" title="show questions tagged with [textarea]" rel="tag">textarea</a> </div></div><div class="mb0 "><div class="mt16 pt4 grid gs8 gsy fw-wrap jc-end ai-start"><div class="grid--cell mr16" style="flex: 1 1 100px;"></div><div class="post-signature grid--cell"><div class="user-info user-hover"><div class="user-gravatar32"><div class="gravatar-wrapper-32"><img src="https://i.stack.imgur.com/F1sS2.jpg?s=32&g=1" alt="" width="32" height="32"></div></div><div class="user-details">  <span>LFC</span> <div class="-flair">  <span class="reputation-score" title="reputation level" dir="ltr">3,755</span> <span title="8 gold signs"><span class="badge1"></span></span>  <span title="8 gold signs"><span class="badgecount">eight</span></span> <span title="19 silver marks"><span class="badge2"></span></span>  <span title="19 silver marks"><span class="badgecount">nineteen</span></span> <span title="40 bronze marks"><span class="badge3"></span></span>  <span title="40 bronze marks"><span class="badgecount">40</span></span> </div></div></div></div><div class="post-signature owner grid--cell"><div class="user-info "><div class="user-gravatar32"><div class="gravatar-wrapper-32"><img src="https://www.gravatar.com/avatar/cedb66e0040bee6b2060aec29bd73848?s=32&d=identicon&r=PG" alt="" width="32" height="32"></div></div><div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person">  <span>DOsS</span> <span class="d-none" itemprop="name">DOsS</span> <div class="-flair">  <span class="reputation-score" title="reputation level" dir="ltr">43</span> <span title="1 silver mark"><span class="badge2"></span></span>  <span title="1 silver mark"><span class="badgecount">one</span></span> <span title="11 bronze marks"><span class="badge3"></span></span>  <span title="11 bronze marks"><span class="badgecount">eleven</span></span> </div></div></div></div></div></div></div><div class="post-layout--right"><div id="comments-206207" class="comments js-comments-container " data-post-id="206207"><ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"><li id="comment-206212" class="comment js-comment " data-comment-id="206212"><div class="js-comment-actions comment-actions"><div class="comment-score js-comment-edit-hide">  <span title="the number of votes "useful comment"" class="cool">one</span> </div></div><div class="comment-text js-comment-text-and-form"><div class="comment-body js-comment-edit-hide">  <span class="comment-copy">C using JavaScript (as an option - jQuery) subscribe to the keypress event (or whatever it is) of the first control and in the function that handles this event copy the contents of the first control to the second</span> - <span>DreamChild</span>  <svg aria-hidden="true" class="svg-icon va-text-bottom o50 iconPencilSm" width="14" height="14" viewBox="0 0 14 14"><path d="M11.1 1.71l1.13 1.12c.2.2.2.51 0 .71L11.1 4.7 9.21 2.86l1.17-1.15c.2-.2.51-.2.71 0zM2 10.12l6.37-6.43 1.88 1.88L3.88 12H2v-1.88z"></path></svg></div></div></li></ul></div><div id="comments-link-206207" data-rep="50" data-anon="true">   <span class="js-link-separator dno">|</span> </div></div></div></div><div id="answers"><a name="tab-top"></a><div id="answers-header"><div class="subheader answers-subheader"><h2 data-answercount="1">  1 answer <span style="display:none;" itemprop="answerCount">1</span> </h2><div></div></div></div><a name="206228"></a><div id="answer-206228" class="answer" data-answerid="206228" itemprop="suggestedAnswer" itemscope="" itemtype="http://schema.org/Answer"><div class="post-layout"><div class="answercell post-layout--right"><div class="post-text" itemprop="text"><p>  Html code: </p><pre> <code> <input class="input" type="text" value=""/> <textarea class="textarea" rows="3" cols="10">700</textarea></code> </pre><p>  JQuery code after loading page: </p><pre> <code> var $textarea = $(".textarea"); $(document).on('keyup','.input', function(){ $textarea.text($(this).val()); });</code> </pre><p>  Same thing on <a href="http://jsfiddle.net/genson/sKnhv/">jsfiddle.net</a> </p><p>  <strong>UPDATE:</strong> <a href="http://jsfiddle.net/genson/sKnhv/2/">Updated example.</a>  Now there is a piece of text that does not change. </p></div><div class="grid mb0 fw-wrap ai-start jc-end gs8 gsy"><time itemprop="dateCreated" datetime="2013-03-25T09:33:07"></time><div class="grid--cell mr16" style="flex: 1 1 100px;"></div><div class="post-signature grid--cell fl0"><div class="user-info "><div class="user-gravatar32"></div><div class="user-details"><div class="-flair"></div></div></div></div><div class="post-signature grid--cell fl0"><div class="user-info "><div class="user-gravatar32"><div class="gravatar-wrapper-32"><img src="https://www.gravatar.com/avatar/e3c35930c079fdfef366ed0dae35379d?s=32&d=identicon&r=PG" alt="" width="32" height="32"></div></div><div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person">  <span>Gena Tsarinny</span> <span class="d-none" itemprop="name">Gena Tsarinny</span> <div class="-flair">  <span class="reputation-score" title="reputation level" dir="ltr">4,594</span> <span title="1 golden mark"><span class="badge1"></span></span>  <span title="1 golden mark"><span class="badgecount">one</span></span> <span title="10 silver marks"><span class="badge2"></span></span>  <span title="10 silver marks"><span class="badgecount">ten</span></span> <span title="23 bronze marks"><span class="badge3"></span></span>  <span title="23 bronze marks"><span class="badgecount">23</span></span> </div></div></div></div></div></div><div class="post-layout--right"><div id="comments-206228" class="comments js-comments-container  dno" data-post-id="206228"><ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"></ul></div><div id="comments-link-206228" data-rep="50" data-anon="true">   <span class="js-link-separator dno">|</span> </div></div></div></div><a name="new-answer"></a></div></div></div><div style="display:none" id="prettify-lang">  lang-html </div></div>
      <br>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
        <ins class="adsbygoogle"
          style="display:block; text-align:center;"
          data-ad-layout="in-article"
          data-ad-format="fluid"
          data-ad-client="ca-pub-4469282388984999"
          data-ad-slot="7248419616"></ins>
        <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      <br>
    <p>Source: <a href="https://ru.stackoverflow.com/questions/206207/">https://ru.stackoverflow.com/questions/206207/</a></p>
<section class="more-articles-navigation-panel js-more-articles-navigation-panel">
<h4>More articles:</h4>
<nav class="list-of-articles-container js-list-of-articles-container"><ul class="list-of-pages js-list-of-pages">
<li><a href="../205980/index.html">  Uploading files to MySQL database directly via the form [closed] </a></li>
<li><a href="../206006/index.html">  Regular expressions: handler does not see% 20 </a></li>
<li><a href="../206089/index.html">  Help to deal with the educational task in si </a></li>
<li><a href="../206169/index.html">  Encoding flies after block update </a></li>
<li><a href="../206181/index.html">  Error: error LNK2019: unresolved external symbol </a></li>
<li><a href="../206208/index.html">  PHP_EOL line break character </a></li>
<li><a href="../206227/index.html">  PIE.htc does not work </a></li>
<li><a href="../206316/index.html">  Run the program from the bat-file with admin rights </a></li>
<li><a href="../206513/index.html">  The script that adds links to files in the database, while changing their location. </a></li>
<li><a href="../206564/index.html">  Why in the development environments QtCreator and MonoDevelop under Linux input / output does not work correctly? </a></li>
</ul></nav>
</section><br />
<a href="../../allArticles.html"><strong>All Articles</strong></a>
<script src="../../js/main.js"></script>

<script type="text/javascript" >
  (function (d, w, c) {
      (w[c] = w[c] || []).push(function() {
          try {
              w.yaCounter62683636 = new Ya.Metrika({
                  id:62683636,
                  clickmap:true,
                  trackLinks:true,
                  accurateTrackBounce:true,
                  webvisor:true
              });
          } catch(e) { }
      });

var n = d.getElementsByTagName("script")[0],
          s = d.createElement("script"),
          f = function () { n.parentNode.insertBefore(s, n); };
      s.type = "text/javascript";
      s.async = true;
      s.src = "https://mc.yandex.ru/metrika/watch.js";

if (w.opera == "[object Opera]") {
          d.addEventListener("DOMContentLoaded", f, false);
      } else { f(); }
  })(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/62683636" style="position:absolute; left:-9999px;" alt="" /></div></noscript>

<script>
    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;
    ga('create', 'UA-166339405-1', 'auto'); ga('send', 'pageview')
  </script>
  <script src="https://www.google-analytics.com/analytics.js" async defer></script>

</section>
</body>

</html>