can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
45 lines (39 loc) • 868 B
HTML
<html>
<head>
<title>input focused!</title>
<style>
.wrapper {
background: grey;
padding: 1em;
}
.wrapper input {
font-size: 18px;
}
.wrapper input:focus {
outline: 5px solid blueviolet;
}
</style>
</head>
<body>
<script type="text/stache" id="demo-html">
<div class="wrapper" on:click="putInFocus()">
<input type="text" focused:bind="inFocus"/>
</div>
<div>In focus: <b>{{ inFocus }}</b></div>
</script>
<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty">
import { DefineMap, stache, stacheBindings } from "can";
var template = stache.from("demo-html");
var ViewModel = DefineMap.extend({
inFocus: "boolean",
putInFocus: function(){
this.inFocus = true;
}
});
var map = new ViewModel({ inFocus: false });
window.map = map;
document.body.appendChild(template(map));
</script>
</body>
</html>