Iframe Editable Auto Height

Iframe Editable Auto Height

by Adi Jaya

HTML

<h1>Iframe Editable Auto Height</h1>

<div id="container">
  <iframe scrolling="no" id="iframe"></iframe>
</div>

CSS

body {
    margin: 0;
    padding: 5%;
    background: #232323;
    color: #fff;
    font-family: sans-serif;
}
iframe {
  width: 100%;
  height:30px;
  border: 0;
  background: #fff;
}

JavaScript

window.onload = function(){ //firefox: must use window load

  $(function() { 
  		var iframe = $( "#iframe" ).contents();
      var docbody = iframe.find( "body" );
      		docbody.prop( "contenteditable", true );
          docbody.html( "<p>Edit Me and Enter</p>" );
          
      iframe.on("keypress", function( event ){
      		var key = event.keyCode || event.which;
      		var height = docbody.height();
          
          if( key == 13 ) { 
    				$( "#iframe" ).css({
          			"height" : height+50+"px"
          	});
          }
          //more code : example if content empty etc...
          
			});
  });
  
}