#1 by Roger97 (edited )
Hey there! My experiment includes a page in which users have to enter a piece of text (using a LongStringField model). We're thinking about adding a word counter. I guess I need to write some JAVA script but I'm not so familiar with it. Can anyone help me?
#2 by Rok
Hello,
Maybe something like this: (jsfiddle) https://jsfiddle.net/j8gchmsw/
Copy all of the below into your html file. Add name="yourVariableName" to textarea to save the text to your variable.
<style>
.word-counter {
display: block;
text-align: right;
margin-top: 5px;
font-size: 0.9em;
color: #6c757d;
}
</style>
<div class="container mt-5">
<div class="form-group">
<label for="exampleTextarea">Enter your text:</label>
<textarea class="form-control" id="wordCountTextarea" rows="5" oninput="updateWordCount()"></textarea>
<span class="word-counter" id="wordCounter">Words: 0</span>
</div>
</div>
<script>
function updateWordCount() {
const text = document.getElementById('wordCountTextarea').value;
const words = text.trim().split(/\s+/).filter(word => word.length > 0);
document.getElementById('wordCounter').textContent = 'Words: ' + words.length;
}
</script>
#3 by Roger97
Thank you Rok! Super grateful :)