Textarea with Colorful Blinking Text Cursor

Written by @kerixa 27 February 2021

Blinking textarea cursor might be somehow annoying for some users. Therefore, why not to add an effect to it. In the following code, you can see how to make this I-shaped cursor colorful and change its color as it types and goes.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
.good {
    caret-color: #10b981;
}

.warning {
    caret-color: #FCD34D;
}

.danger {
    caret-color: red;
}
</style>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.6/tailwind.min.css'>

<div class="flex items-center justify-center h-screen bg-gray-200">
	<div class="bg-white rounded-lg border shadow-lg p-4 w-1/5" style="width: 50%" >
    <label class='text-gray-800 font-regular'>Your Comment Here!</label>
    <p class='text-gray-400 text-sm p-0 m-0'>The cursor will change colors as you type!</p>
    <textarea id='comment' maxlength='50' class='bg-gray-200 p-1 h-20 w-full mt-0 good'></textarea>
	</div>
	
</div>
<font face="Tahoma"><a target="_blank" href="http://www.htmlfreecode.com/"><span style="font-size: 8pt; text-decoration: none">HTML Free Code</span></a></font>
<script>
const textarea = document.getElementById('comment')
const changeCursor = (e) => {
    let { value } = e.target
    let newClass = getRangeColor(e.target.maxLength, value.length)

    e.target.classList.remove('good', 'warning', 'danger')
    e.target.classList.add(newClass)
}

const getRangeColor = (maxLen, inputLen) => {
    let range = maxLen / 3

    if (between(inputLen, 0, range)) {
        return 'good'
    } else if (between(inputLen, range, range * 2)) {
        return 'warning'
    } else {
        return 'danger'
    }
}

const between = (x, min, max) => {
    return x >= min && x <= max;
}

textarea.addEventListener('input', changeCursor);
</script>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300