Detect mouse cut/paste in textarea (vanilla JS, no libraries, please)

[WolfShade]

Hello, everyone,

I’m using JavaScript to limit the number of characters allowed in a textarea. So far, it’s working great using onkeyup as the event. However, I’d like to also have the function triggered if someone uses a right-click to either paste or cut/delete text.

I did some Googling, and found that (supposedly) modern browsers support oncut and onpaste. However, my experience with this is proving otherwise. It’s not working in IE, FF, or Chrome.

Pseudo code:

<span id="abstractLeft"></span>
<textarea id="ta" name="ta" style="width:500px; height:100px;" onkeyup="limitTxt(this,'abstractLeft',4000);" oncut="limitTxt(this,'abstractLeft',4000);" onpaste="limitTxt(this,'abstractLeft',4000);"></textarea>

<script type="text/javascript">
  function limitTxt(elem,remLen,maxChar){
    var charRem = maxChar;
    (elem.value.length > maxChar) ? 
          elem.value = elem.value.substring(0,maxChar) : 
          charRem = maxChar - elem.value.length ;
    document.getElementById(remLen).innerHTML = charRem + " characters remaining";
    }
</script>

This works great if the user is using CTRL-V or CTRL-X; but not at all if the right-click menu paste/cut/delete is used. Suggestions greatly appreciated.

V/r,

[RyanReese]

Edit fiddle - JSFiddle - Code Playground

[WolfShade]

Thanks for the suggestion, @RyanReese. (Normally, jsfiddles don’t work, here… this time it did.) I should have stated that I’m trying to do this without jQuery (we’re trying to avoid libraries, unless one is really demanded.)

Is the only way to do it to keep track of the before and after length of the value?

V/r,

[James_Hibbard]

@WolfShade

I’m using JavaScript to limit the number of characters allowed in a textarea

Any reason that this won’t work?

<textarea maxlength="10"></textarea>

[RyanReese]

@WolfShade

Is the only way to do it to keep track of the before and after length of the value?

No clue - I was just browsing through the interwebs and came across it. Seemed to work both ways.

Perhaps you could see if a a sort of event (not sure on this part here) changes the length of the textarea by more than one? That should be any pasting. E.g. any character on a keyboard should only be 1 character. If it’s more than 1 that magically appears, it should be from a paste.

Does that make sense? I’m going through the logic in my head and it’s working in my head…

[WolfShade]

I know maxlength works for input type=“text”. Unless it’s been implemented for textarea quite recently, I don’t think that will work.

UPDATE: According to MDN, maxlength does work on textarea (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea). This is news, to me, but then I don’t check on HTML tag attributes every day.

[James_Hibbard]

Yeah, I think it was introduced in HTML5. AFAIK, it works in Chrome, FF4+ and IE10.
Is that any good to you?

[DaveMaxwell]

Looks like it became common as part of the HTML5 spec, so as long as you’re not trying to support an older version of html, you should be OK.

edit: ninja’d

[RyanReese]

Yeah it won’t work if the HTML of the textarea is set to above the maxlength in characters but (assuming the user will be setting the text of it) if you don’t care about IE9 or down support, go for it.

[WolfShade]

It’ll keep users from putting too much in the textarea, yeah; but I’m also providing a counter that keeps track of the number of characters remaining until the limit is reached. As long as the keyboard is being used, it works great. I am attempting to provide that same functionality for those who use “right-click” menus for paste/cut/delete.

V/r,

[RyanReese]

@WolfShade

As long as the keyboard is being used, it works great. I am attempting to provide that same functionality for those who use “right-click” menus for paste/cut/delete.

That fiddle I linked to can definitely be modified and plug your own character count into it.

[cpradio]

Can you simply just add an onblur event and update the counter when the field loses focus?

[WolfShade]

@cpradio

Can you simply just add an onblur event and update the counter when the field loses focus?

That’s what I’ve just now done. Feels really hackish, to me, but it works.

[James_Hibbard]

From a usability standpoint, wouldn’t it be better to let people enter what they want into the text areas, but flag any of them as invalid as soon as too many characters are entered?
You could then prevent the user from submitting the form until all of the text areas were within the correct limits.

[WolfShade]

With as many form elements as there are, giving each of them attributes that will either A) prevent form submit, or B) alert user unless/until all required fields are properly completed is way more work. Better to make sure they won’t have truncated data on-the-fly by limiting input to what the database is designed for.

I was going to use both client- and server-side validation. But I’m going to go with strictly server-side validation (as soon as I can figure out how to get AJaX to submit to a ColdFusion component.)

V/r,

[James_Hibbard]

Fair enough, it’s your site. But I would be miffed if I pasted a bunch of content into a text box and it got truncated by a helpful script.

@WolfShade

as soon as I can figure out how to get AJaX to submit to a ColdFusion component.

Let me guess. No jQuery, right? : )
(I was about to post a jQuery snippet to do that)

[felgall]

@James_Hibbard

if I pasted a bunch of content into a text box and it got truncated by a helpful script

Better that it get truncated before the form is submitted than it getting truncated afterward because the field it is to be stored in isn’t big enough. Regardless of what length you set as the maximum for the field there is always a potential or it to get truncated if someone posts some longer text into the field.

One of the first JavaScript articles that I wrote many years ago was about limiting the amount that can be entered into a textarea - http://www.felgall.com/jstip20.htm

[WolfShade]

Yeah, the boss wants to keep this free from jQuery unless there is something that demands jQuery (like something that would be WAY more typing to accomplish something that jQuery already does.) Since jQuery is mostly DOM-manipulation, and the client doesn’t want things like sliding/fading and stuff like that, we’re sticking to strictly vanilla JS.

I’ve got the AJaX part working; but the CFC isn’t co-operating. Keeps giving error message that the “page cannot be displayed”. Well, all the CFC is currently set to do is respond with “HEY” when the form is submit.

I’m beginning to think that there might be a CFAdmin setting that is preventing the CFC from working. That’s the only thing I can think of that would cause that error message.

V/r,

[Mittineague]

Of course my site isn’t a business so my concern is less. But it is amazing how many SPAMmers don’t read.