Events after keypresses (jquery)

Question

I have a textarea. After the user types X number of characters in the textarea I want a few different events to fire.

append the first X characters typed into another textfield.
expand the textarea to give more room to continue typing

I know I can use keypress events in jquery, but how can I set off a event after say 25 characters have been typed?

I'm current trying this:

$('#post-content-field').keyup(function () {
$('#post-title-field').val($("#post-content-field").val()).trigger('change');
                            });

Sampson · Accepted Answer · 2012-05-10T19:41:37.697

2

You can check the .length of the value of the textarea after each keypress. If it is greater than or equal to 25, grab the first few characters and increase the textarea height.

$("textarea.affectMe").on("keyup", function(){
  if ( this.value.length >= 25 && !$(this).hasClass("done") ) {
    $(this).addClass("done");
    $(".threeChars").val( this.value.substring(0,25) );
  }
});

Note, I'm adding a class to the textarea so we don't do this over and over after each keypress when the length is greater than 25.

Demo: http://jsbin.com/afonar/edit#javascript,html

edited May 10 '12 at 19:41

answered May 10 '12 at 19:04

Sampson

265,109
74
539
565

Thats exactly what I want to do. Knowing how to write it all is my hangup. – marck May 10 '12 at 19:26
Thanks very much! That's doing exactly what I wanted. Much appreciated! – marck May 11 '12 at 02:31
@user179846 I'm happy this answer worked for you. Please consider accepting it if it solved your problem. I noticed the answer you currently have selected still left you with questions. – Sampson May 11 '12 at 02:51
Oh right. Didn't realize I could only select one correct answer. You both helped me out a bit, but yours was the best solution for my exact problem. Thanks again! Looking forward to showing off my ideas – marck May 11 '12 at 03:08
This is really nice, I needed this for an older version of jQuery before 1.7 (`.on`) so I changed it to `.bind` and it works great. – Danny Englander Nov 25 '13 at 18:57

score 1 · Answer 2 · edited May 23 '17 at 12:20

Use jquery and the countChar function below

 <script src="http://code.jquery.com/jquery-1.5.js"></script>
    <script>
        function countChar(val){
                                var len = val.value.length;
                                if (len >= 500) {
                                    val.value = val.value.substring(0, 500);
                                }else {
                                    $('#charNum').text(500 - len);
                                }
        };
    </script>

In HTML call the function like

<textarea id="field" onkeyup="countChar(this)"></textarea>
<div id="charNum">
</div>

The div will display the character count. You can do anything inside the function

Reference : Count characters in textarea

Okay that works. It allows me to fire events after X characters. **But**: I cannot type more than X characters, and it continually replaces the text in the other field. How can I have it replace just once. — marck, May 10 '12 at 19:25

score 1 · Answer 3 · answered May 10 '12 at 19:31

1

That was for your reference you can do anything you like. Remove the lines that stops you from adding more text

refer below

function countChar(val){
    var len = val.value.length;
     $('#charNum').text(len);
     if (len >= 500) {
                     // Copy
      }else {
            //DO anything
      }
};

answered May 10 '12 at 19:31

Imdad

5,942
4
33
53

Ah that works now. I see now how to test for length then use an if/else statement to fire events. How can I got about copying the first 25 characters to this other field ONCE? – marck May 10 '12 at 19:39
inside the function write : str = val.value.substring(0, 25); Then copy it to any element you want. – Imdad May 10 '12 at 19:54

score 0 · Answer 4 · answered May 10 '12 at 19:04

0

$('textarea').bind('keyup', function(e){
    if(e.target.value.length === 25) {
        // do stuff
    }
});

answered May 10 '12 at 19:04

nathanjosiah

4,441
4
35
47

Events after keypresses (jquery)

4 Answers4