Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!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>
  <div id="target" class="text-area" contenteditable='true'>This text can be anything... how to insert a div when i type start typing @... </div>
</body>
</html>
 
.text-area {
  height: 190px;
  border: 1px solid #ccc;
  padding: 5px;
  white-space: pre-line;
  overflow-y: auto;
}
 
var flag = false;
$("#target").keydown(function(e) {
  
//  console.log(e, String.fromCharCode(e.which));
 
  if(e.which === 50 && e.shiftKey === true ){
      if(flag === true){
        flag = false;      
        return;
      }      
      flag = true;
    
      //console.log($('#target'),$('#target').prop('selectionStart'));
      
    } 
 
});
Output

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

Dismiss x
public
Bin info
Selvaganeshpro
0viewers