uxrocket.textlimit
Version:
Textlimit and remaining chars
77 lines (63 loc) • 1.54 kB
HTML
<html>
<head>
<title>UX Rocket TextLimit Sample</title>
<meta charset="utf-8" />
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="../lib/uxrocket.textlimit.js"></script>
<script>
$(function(){
$(".textlimit").textlimit();
});
</script>
<style>
*, *:before, *:after { box-sizing: border-box }
body { margin: 0; padding: 0; font: 16px/1.4 "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.content { padding: 5em; }
.uxitd-plugin-wrap {
width: 250px;
}
.textlimit {
width: 250px;
font-size: 1rem;
padding: 5px;
}
.hide {
display: none;
}
/** Text Limit styles **/
.uxitd-textlimit-wrap {
position: relative;
display: inline-block;
}
.uxitd-textlimit-ready {
width: 90%;
}
.uxitd-hide-remaining .uxitd-textlimit-ready {
width: 100% ;
}
.uxitd-textlimit-ready + .uxitd-textlimit-remaining {
margin-left: 3px;
}
.uxitd-textlimit-remaining {
color: #37ade0;
line-height: 1em;
}
.uxitd-hide-remaining .uxitd-textlimit-remaining {
display: none;
}
</style>
</head>
<body>
<div class="content">
<div class="example">
<p class="wrap">
<input type="text" class="textlimit" maxlength="20" data-on-update="console.log('updated')" />
</p>
<p class="wrap">
<textarea class="textlimit" placeholder="Type something..." maxlength="150"></textarea>
</p>
</div>
</div>
</body>
</html>