在textarea上使用onkeyup和onkeydown来控制最大长度

Question

I want to have a maxlength in textarea but html:textarea doesnt have the maxlength attribute. So I used the foll. code:

<html:textarea rows="5" cols="60" onkeyup="return imposeMaxLength(this, 50);" onkeydown="return imposeMaxLength(this, 50);" property="abc"></html:textarea>

function imposeMaxLength(Object, MaxLen)
    {
      return (Object.value.length <= MaxLen);
    }

This restricts the characters in the textarea to be < 50 but what happens is once you reach the limit(ie 50 in my case) the cursor is not functional. I cannot move cursor in the textarea. I mean i cannot delete the content or use backspace or do a ctrl+A and delete. The content remains unaltered or the textares content couldnt be changed. Is there any workaround to make it work or anyother suggestion?

Answer 1

The problem with you approach it that you restrict any input after max length is reached. Might be better to slice the input to the size you want. Adding the event handlers is not necessary, but inline handlers in the html should be avoided.

var myTextarea = document.querySelector("#my-textarea");
var DEFAULT_MAX_LENGTH = 5;

function limitLength() {
  var maxLength = this.getAttribute("max-length") || DEFAULT_MAX_LENGTH;
  if (this.value.length > maxLength) {
    this.value = this.value.slice(0, maxLength);
  }
}

myTextarea.addEventListener("keydown", limitLength.bind(myTextarea));
myTextarea.addEventListener("keyup", limitLength.bind(myTextarea));

Example Code on Plunker

Answer 2

I'm not too sure about your HTML syntax and floating JavaScript, but maybe that's just in your question.

In any event, at this point you cancel all keys once you reached the maximum length. What you want is leave the control keys alone. That includes the arrow keys, Ctrl-A, delete, backspace...

In your test, check the key first and if it is a special key, then always return true. Otherwise return the result of your current test. You can test with an alert() or a console.log() to see what the special key codes are:

console.log("Received key = " + Object.keycode);

The problem you'll have here also is that you're not using jQuery and this the "keycode" parameter is not going to work in all browsers. With jQuery you'd cancel the default propagation instead and use the event object the jQuery provides. It makes your code a lot easier/cleaner to handle such things.

PS I would avoid using the name "Object" for JavaScript variables. "Obj" would probably be safer.