jQuery textarea keyUp is breaking all following code
Question
I feel that I might be overlooking something here. I wan to display the character count of a textarea in a <span>
element underneath the <textarea>
. I am using the following jQuery and HTML:
jQuery:
$('#ws3 .textarea textarea[name="company-description"]').keyUp(function() {
var charLength = $(this).val().length;
$('span#charCount').html(charLength + ' of 250 characters used');
if($(this).val().length > 250)
$('span#charCount').html('<strong>You may only have up to 250 characters.</strong>');
});
HTML:
<div id="ws3" class="ws-section">
<label for="company-description">Describe your company for us</label>
<div class="textarea">
<textarea id="company-description" name="company-description" class="ws-required"></textarea>
</div>
<span id="charCount">charCount</span>
</div>
Also, all jQuery code following this block does not work, almost as if the browser has stopped reading the .js file at this block of code.
Solution
There is no keyUp
function.. change it to keyup
and then it should work fine..
$('#ws3 .textarea textarea[name="company-description"]').keyup(function() {
Tips:
- When there is script error, Javascript compiler will stop executing the following lines below the error line and will continue on to next
js
file or next<script>
block - In future, whenever you have some issue with a script, please look at the console for errors. Below is what I got when I used
keyUp
Error: $("#ws3 .textarea textarea[name=\"company-description\"]").keyUp is not a function
OTHER TIPS
There is no keyUp
function in jQuery the function name is keyup
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow