How can I count and show Unicode Characters when insert onclick to textarea?

Question

I insert Unicode-Smiley to HTML textarea. I have an second JS script to count characters typed by user to limit the length in the textarea, this is the JS code.

Now, when the Unicode smiley inserted with the first js code to the textarea, the second script dont show how many chars are inserted...the counter shows 0. I think the error is that the second js script need a line of code to watch when chars inserted via onclick, or the 2 scripts must merge to one?

function showEmoji(elem) {
  document.querySelector('textarea').value += elem.textContent;
}


$(document).ready(function() {
  $('textarea').on("input", function() {
    var maxLength = $(this).attr("maxLength");
    var currentLength = $(this).val().length;
    var color = currentLength < 20 ? '#ff0000' : '#00BB00';
    
    $('#minChars').css({
      'color': color
    });
    
    $('#Chars').text(currentLength);
    
    if (currentLength > 480) {
      color = '#FF9900';
    }
    
    if (currentLength > 500) {
      color = '#ff0000';
    }
    
    $('#Chars').css({
      'color': color
    });
  });
});

<span onclick="showEmoji(this)">&#129321;</span>
<textarea name="text" rows="6" minlength="20" maxlength="500" required placeholder="Text.."></textarea>
<div><b id="Chars" class="red">0</b> from min. <b id="minChars" class="red">20</b> and max. <b class="red">500</b> Characters used.</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Please take the tour so you know how to respond to answers.

isherwood
– isherwood

2025-01-31 20:33:13 +00:00
Commented Jan 31 at 20:33 — isherwood
– isherwood, Commented Jan 31 at 20:33

isherwood · Accepted Answer · 2025-01-31 19:40:13Z

0

You need to call your length update code on both events (icon append and text input). To do that, abstract that code into a new function and call it from both scenarios, passing in the jQuery object that is the textarea.

You can see how using jQuery for some parts of your code and not others can be a hassle. You have to get the raw element from the jQuery object to use some native JavaScript properties. See https://youmightnotneedjquery.com and consider converting to not require jQuery.

function updateLength(el) {
  var maxLength = el.attr("maxLength");
  var currentLength = el.val().length;
  var color = currentLength < 20 ? '#ff0000' : '#00BB00';

  $('#minChars').css({
    'color': color
  });

  $('#Chars').text(currentLength);

  if (currentLength > 480) {
    color = '#FF9900';
  }

  if (currentLength > 500) {
    color = '#ff0000';
  }

  $('#Chars').css({
    'color': color
  });
}

$(document).ready(function() {
  $('textarea').on("input", function() {
    updateLength($(this));
  });

  $('span').on('click', function() {
    const textareaEl = $('textarea').first();
    textareaEl[0].value += $(this)[0].textContent;
    updateLength(textareaEl);
  });
});

<span>&#129321;</span>
<textarea name="text" rows="6" minlength="20" maxlength="500" required placeholder="Text.."></textarea>
<div><b id="Chars" class="red">0</b> from min. <b id="minChars" class="red">20</b> and max. <b class="red">500</b> Characters used.</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

edited Jan 31 at 19:40

answered Jan 31 at 19:32

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user27340936 Jan 31 at 20:29

Thank you very much, I still have a lot to learn...but is it harmful to continue using jquery?

isherwood Jan 31 at 20:32

Just with respect to page load speed, which is minor. My point was really that you should either use all jQuery or none, not a mix of both jQuery and native JavaScript.

user27340936 Jan 31 at 22:02

I found a another problem. When adding one smiley, the form can be submitted although these are only 2 characters, minlength 20 is ignored. I can also write hello and insert 1 smiley, that are 7 characters, even then the form will be sent. I added a Form for testing..

isherwood Feb 1 at 3:35

That's unrelated to your original question.

user27340936 Feb 1 at 9:23

Yes but is that not logical? should be self-evident and a programmer should know why a limit is set. Do I have to ask a new question for this problem? Thank you anyway.

Collectives™ on Stack Overflow

How can I count and show Unicode Characters when insert onclick to textarea?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related