"text box count"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/yingshandeng/pen/boRNLx?limit=all&page=3&q=rich+editor" /> <style class="cp-pen-styles">html, body { display: flex; width: 100%; height: 100%; padding: 0; margin: 0; background: #E3F3FD; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; } .rich-editor { width: 508px; height: auto; /* max-height: 134px; overflow-y: scroll;*/ margin: auto; padding: 8px; background: #fff; border-radius: 8px; border: 1px solid #A4D9F9; box-shadow: 0 0 0 1px #A4D9F9; } .wrapper { position: relative; width: 100%; min-height: 116px; z-index: 1; } .editor-area, .editor-backer { width: 100%; height: auto; min-height: 116px; font-size: 14px; line-height: 20px; word-wrap: break-word; background: transparent; } .editor-area { outline: none; border: none; } .editor-area.is-showPlaceholder[contenteditable=true]:before { content: attr(placeholder); color: #ccd6dd; position: absolute; } .editor-backer { position: absolute; left: 0; top: 0; color: transparent; z-index: -1; } .editor-backer em { background-color: #ffb8c2; font-style: normal; font-size: 14px; line-height: 20px; white-space: pre-wrap; word-wrap: break-word; } .counter { float: right; color: #657786; font-size: 14px; line-height: 20px; text-align: right; user-select: none; } .counter.max-reached { color: #e0245e; }</style></head><body> <div class="rich-editor"> <div class="wrapper"> <div class="editor-area" contenteditable="true" placeholder="Enter text here..."></div> <div class="editor-backer"></div> </div> <span class="counter">140</span> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >var editorArea = document.querySelector('.editor-area') var editorBacker = document.querySelector('.editor-backer') var counter = document.querySelector('.counter') var limitCnt = 140 var isComposing = false editorArea.addEventListener('compositionstart', () => { isComposing = true }) editorArea.addEventListener('compositionend', () => { isComposing = false // let text = editorArea.innerText setCounter(limitCnt - text.length) }) function setCounter (cnt) { counter.innerHTML = cnt if (cnt < 0) { counter.classList.add('max-reached') } else { counter.classList.remove('max-reached') } } var inputCompose = function () { if (editorArea.innerHTML === '<div><br></div>' || editorArea.innerHTML === '<br>' || editorArea.innerHTML === '') { editorArea.classList.add('is-showPlaceholder') } else { editorArea.classList.remove('is-showPlaceholder') } let text = editorArea.innerText let remainingCnt = limitCnt - text.trim().length if (remainingCnt < 0) { let allowedText = text.substring(0, limitCnt) let refusedText = text.substring(limitCnt) editorBacker.innerHTML = allowedText + '<em>' + refusedText + '</em>' } else { editorBacker.innerHTML = '' } if (!isComposing) { setCounter(remainingCnt) } } inputCompose(); editorArea.oninput = inputCompose //# sourceURL=pen.js </script> </body></html>

Related: See More

Material Kit React
Bootstrap Images to Left and Right with Text and Heading
Creating password field text hide show via a single class
JS Typewriter (Text Animation)

Questions / Comments: