Character Count
Character count for textarea with alert and cut-off. Based on experiment by Jason Saba.
Related:
Coding Preferences
HTML
Javascript
Validations
(Errors from your JS or Pre-Processors code)
CSSDeck G+
",
"css": "@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,300italic);\n*, *:before, *:after { box-sizing: border-box; }\nhtml { font-size: 100%; }\nbody { \n font-family: 'Open Sans', sans-serif;\n font-size: 16px;\n background: tomato;\n color: #fff;\n}\n\n.wrapper {\n max-width: 65%;\n margin: auto;\n}\n\n\nh1 { \n color: #fff; \n margin: 3rem 0 1rem 0; \n padding: 0;\n font-size: 1.5rem;\n font-family: 'Open Sans', sans-serif;\n font-weight: 400;\n display: block;\n text-align: Center;\n}\n\ntextarea {\n width: 100%;\n min-height: 100px;\n resize: none;\n border: 1px solid #ddd;\n outline: none;\n padding: 0.5rem;\n color: #666;\n box-shadow: inset 0 0 0.25rem #ddd;\n &:focus {\n outline: none;\n border: 1px solid darken(#ddd, 5%);\n box-shadow: inset 0 0 0.5rem darken(#ddd, 5%);\n }\n &[placeholder] { \n font-style: italic;\n font-size: 0.875rem;\n }\n}\n\n#the-count {\n float: right;\n padding: 0.1rem 0 0 0;\n font-size: 0.875rem;\n}",
"js": "$('textarea').keyup(function() {\n \n var characterCount = $(this).val().length,\n current = $('#current'),\n maximum = $('#maximum'),\n theCount = $('#the-count');\n \n current.text(characterCount);\n \n \n /*This isn't entirely necessary, just playin around*/\n if (characterCount < 70) {\n current.css('color', '#fff');\n current.css('font-weight', 'normal');\n }\n if (characterCount > 70 && characterCount < 90) {\n current.css('color', '#eee');\n current.css('font-weight', 'normal');\n }\n if (characterCount > 90 && characterCount < 100) {\n current.css('color', '#793535');\n current.css('font-weight', 'normal');\n }\n if (characterCount > 100 && characterCount < 120) {\n current.css('color', '#841c1c');\n current.css('font-weight', 'normal');\n }\n if (characterCount > 120 && characterCount < 139) {\n current.css('color', '#8f0001');\n current.css('font-weight', 'bold');\n }\n \n if (characterCount == 140) {\n maximum.css('color', '#8f0001');\n current.css('color', '#8f0001');\n theCount.css('font-weight','bold');\n } else {\n maximum.css('color','#fff');\n theCount.css('font-weight','normal');\n }\n \n \n});"}
,
"is_picked": true }
;
window.__default_settings = [] ;