Contenteditable input event test

Copy the entire editable value to a specified destination on input event

by panamaprophet

HTML

<div id="hostplan" contenteditable data-bind="#hostingPlan">Economy Hosting plan, to renew every 12 months with these domains:
</div>
<div id="pending_doms">
    <div id="div2_1">
        <span contenteditable data-bind="#domain1">domain1.com</span>
    </div>
    <div id="div2_2">
        <span contenteditable data-bind="#domain2">domain2.com</span>
    </div>
    <div id="div2_3">
        <span contenteditable data-bind="#domain3">domain3.com</span>
    </div>
</div>

<input type="text" id="hostingPlan" /><br>
<input type="text" id="domain1" /><br>
<input type="text" id="domain2" /><br>
<input type="text" id="domain3" /><br>

JavaScript

$(document).ready(function(){

	//for all contenteditable elements
	$('[contenteditable]').bind('input', function(event){
  	
    //selector of item where to copy located in data-bind attribute
    var targetSelector = $(this).data('bind'),
    		target = $(targetSelector);

		//get current value which will be passed to target element
    var value = $(this).html();
        
    //if target element exists, insert data in it!
    if (target.length > 0) {
    		target.val(value);
    }
  
  });
  
  
    //copy initial values to their destination
    $('[contenteditable]').trigger('input');
 
});