Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
  <input type="text" name="firstTarget" tabindex="0" data-textarea="0"/>
    <input type="text" name="secondTarget" tabindex="0" data-textarea="1"/>
    <input type="text" name="thirdTarget" tabindex="0" data-textarea="2"/>
    <textarea disabled="disabled" name="result">I have this text and I want to update it using firstTarget. After that I want to use secondTarget and thirdTarget</textarea>
<textarea disabled="disabled" name="result">I only want to use secondTarget here</textarea>
<textarea disabled="disabled" name="result">I only want to use thirdTarget here</textarea>
  
</body>
</html>
 
var delay = 1000;
var wait = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();
​
$('input').keyup(function(){
   var regVal=$(this).data('replace'); 
   var that = $(this);
  wait(function(){
  $('textarea').each(function(){
    var newText = $(this).val().replace( regVal, that.val());
    $(this).val(newText); 
  });
  }, delay);
}).each(function(){
    $(this).data('replace', this.name);
  });
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers