Question

I have 2 textarea field. The first field have character limit. When a user type a text in the first field, after the limit reach, the text will automatically continue to the second field.

The problems is when user type or paste a url, the whole url need to be moved to the second field. I thinking to use regex and parse the text in first field in keyup event handler. The pattern that I will looking up is http://…

Does anyone ever have the similar problems, or is there any jquery plugins that could do this?

Update:

Let say the first field have 15 character limit. User type:

'abc '

Then paste a link after the space: http://google.com/?q=test

The field value will become:

'abc http://google.com/?q=test'

Which is more than 15 character. Right now the script will cut the text to become:

'abc http://goog'

and the rest of the text sill go to second field:

 'le.com/?q=test'

The desired action should be that the whole http://google.com/?q=test is moved into second field, leaving 'abc ' in the first field.

My question is, do you have better/efficient way to implement this feature, or there are jquery library out there that have this feature?

Answer 1

I can’t see your problem. Presumably you are going to your character limit, going back to the previous whitespace character (which might be any of a number of characters – space, tab, return, and so on) and splitting the content there. That should account for URLs as they don’t have spaces.

Edit

Here is a quick example of what I am talking about:

<form>
  <textarea id="ta0" style="width: 200px; height 200px;"></textarea>
  <textarea id="ta1" style="width: 200px; height 200px;"></textarea>
  <input type="reset">
</form>
<script type="text/javascript">

function moveWords() {
    var el1 = this;
    var el1full = false;
    var el2 = document.getElementById('ta1');
    var charLimit = 20;
    var word, words;
    var v1 = el1.value;
    var s = '';

    // If gone over character limit
    if (v1.length > charLimit) {
      words = v1.split(/\s+/);

      // Get the value, split into words, add back 
      // one at a time until over limit, then put into
      // next field and change focus
      for (var i=0, iLen = words.length; i<iLen; i++) {
        word = words[i];

        if (!el1full && (s.length + word.length) < charLimit) {
          s += (s == '')? word : ' ' + word;
          len = s.length;
        } else {
          if (!el1full) {
            el1full = true;
            el1.value = s;
            s = '';
          }
          s += (s == '')? word : ' ' + word;
        }
        el2.value = s;
        el2.focus();
      }
    }
}

window.onload = function() {
  document.getElementById('ta0').onkeyup = moveWords;
}