<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
*, *:before, *:after {
box-sizing: border-box;
}
html {
font-size: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
background: #d0e6ef;
color: #666;
}
.wrapper {
max-width: 75%;
margin: auto;
}
textarea {
width: 100%;
min-height: 100px;
resize: none;
border-radius: 8px;
border: 1px solid #ddd;
padding: 0.5rem;
color: #666;
box-shadow: inset 0 0 0.25rem #ddd;
&:focus {
outline: none;
border: 1px solid darken(#ddd, 5%);
box-shadow: inset 0 0 0.5rem darken(#ddd, 5%);
}
&[placeholder] {
font-style: italic;
font-size: 0.875rem;
}
}
h1 {
color: #555;
margin: 3rem 0 1rem 0;
padding: 0;
font-size: 1.5rem;
}
#the-count {
padding: 0.1rem 0 0 0;
font-size: 0.875rem;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var text_max = 250;
$('#textarea').keyup(function (event) {
if (!checkSpecialKeys(event)) {
var text_length = $('#textarea').val().length;
current = $('#current'),
maximum = $('#maximum'),
theCount = $('#the-count');
current.text(text_length);
/*This isn't entirely necessary, just playin around*/
if (text_length < 70) {
current.css('color', '#666');
}
if (text_length > 70 &&
text_length < 90) {
current.css('color', '#6d5555');
}
if (text_length > 90 &&
text_length < 100) {
current.css('color', '#793535');
}
if (text_length > 100 &&
text_length < 120) {
current.css('color', '#841c1c');
}
if (text_length > 120 &&
text_length < 139) {
current.css('color', '#8f0001');
}
if (text_length >= 140) {
maximum.css('color', '#8f0001');
current.css('color', '#8f0001');
theCount.css('font-weight', 'bold');
} else {
maximum.css('color', '#666');
theCount.css('font-weight', 'normal');
}
}
});
});
/*
Checks if the keyCode pressed is inside
special chars
-------------------------------------------------------
*/
function checkSpecialKeys(e) {
if (e.keyCode != 8 && e.keyCode != 46 && e.keyCode
!= 37 && e.keyCode != 38 && e.keyCode != 39 &&
e.keyCode != 40)
return false;
else
return true;
}
</script>
</head>
<body>
<div class="wrapper">
<h1>Displaying
The Character Count of a Textarea</h1>
<textarea name="the-textarea" id="textarea" rows="4" cols="30" maxlength="250" placeholder="Start Typin..." class="char-textarea"></textarea>
<div id="the-count">
<span id="current">0</span>
<span id="maximum">/ 250</span>
</div>
</div>
</body>
</html>
