Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="" content="" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <style>
   my-input {
     display: inline-block;
     
   }
   my-input div {
     height: 18px;
     width: 200px;
     background-color: white;
     border: solid 1px black;
   }
  </style>
  
<div id='out'></div>
<script id="my-input-template"
        type="text/stache">
 <div 
   ($keydown)='updateValue(%event)'
   tabindex='0'>{{value}}</div> 
</script>
  
<script id="app" type="text/stache">
  <p> Custom: <my-input {(value)}="name"/> </p>
  <p> Native: <input {($value)}="name"/> </p>
</script>
  
  
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="//canjs.com/release/2.3.2/can.jquery.js"></script>
<script src="//canjs.com/release/2.3.2/can.stache.js"></script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
justinbmeyerpro
0viewers