Html textarea - color characters after maxlength

Question

so I have a textarea with a maxlength of 140, however I would now like to change it so that any characters after 140 will be red (indicating that those characters won't be saved).

I imagine some javascript/ jquery is going to be needed but I have no idea where to start. I've had a look online but can't seem to find anything.

Any ideas?

Why not use a counter and once the character limit has been reached **then** the textarea will turn red? Just an idea. [Here is a starting point](http://stackoverflow.com/questions/5371089/count-characters-in-textarea) — djthoms, Apr 30 '14 at 16:05
You can't change the color of just some characters in a textarea, it's all or nothing, so the only way to solve this would be using two textareas with different colors on top of each other, and shift the focus when a certain length is reached, but it will be somewhat complicated, maybe a contentEditable element would be easier. — adeneo, Apr 30 '14 at 16:05
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable would be your starting place. — Jeremy J Starcher, Apr 30 '14 at 16:06
Just set MaxLength and don't try to reinvent the wheel. Do something that people are already familiar with. — Reinstate Monica Cellio, Apr 30 '14 at 16:07
didn't read well the question. no, you cannot PARTIALLY change the characters. you can change ALL or nothing. — Luis Masuelli, Apr 30 '14 at 16:08
I would suggest not doing something like this because there is no need for it, and I don't think you can change some characters in a textarea. What you can do is output a message or something to warn the user that they have hit the max length. However, i don't think anything is needed for this — Huangism, Apr 30 '14 at 16:11

score 2 · Accepted Answer · answered Apr 30 '14 at 16:17

Here's a starting point, using two textareas. It needs a lot more work to make it work flawlessy

$('#textarea2').on({
    focus: function() {
        if (this.value.length >= 20) $('#textarea1').focus();
    },
    keyup: function() {
        if (this.value.length >= 20) $('#textarea1').focus();
        $('#textarea1').val(this.value)
    }
})

FIDDLE

score 1 · Answer 2 · answered Apr 30 '14 at 16:15

1

I am not going to write the code for you, but the way I would do this would be to dynamically copy the content entered into the textarea to a div, which is displayed to the user, either in addition to the textarea, or by using a bit of css/javascript, instead of the textarea. This is how javascript wysiwyg html editors typically work

You can then use the length of the value to put a span around the characters in the div that exceed the required max and put a class on that span.

answered Apr 30 '14 at 16:15

Evert

8,161
1
15
17

Hey I'm actually curious about coding this now... Just to get this straight, I'll have 2 elements: 1 text area and 1 div. They'll be positioned absolutely (odd phrasing lol) on top of each other. The text area's text will be hidden but as it's typed in, display on the div. Alright, now that I think I have the theory down I'm going to attempt this :) – Andrew Allbright May 01 '14 at 14:03
@AndrewAllbright here is a quick rough implementation as a starting point http://jsfiddle.net/Rx77a/ – Evert May 01 '14 at 14:32
1

Check out my updated answer to this question- I create a very rough implementation of what you described. You cannot highlight nor edit much in my version but I now have a better perspective on how javascript WYSIWYG editors work. P.S. llamas are awesome. – Andrew Allbright May 01 '14 at 14:40

Andrew Allbright · Answer 3 · 2014-05-01T14:38:57.803

EDIT: Buggy vanilla version of what Evert was describing.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #llama {
            opacity: 0;
            z-index: 1;
            font: 14px Verdana, Arial, Helvetica, sans-serif;
            padding: 4px !important;
        }
        #llamallama {
            color: orange;
            z-index: 2;
            word-wrap: break-word;
            font: 14px Verdana, Arial, Helvetica, sans-serif;
            padding: 4px !important;
        }
        .abspos {
            top:10px;
            left:10px;
            position: absolute;
        }
    </style>
</head>
<body>
    <textarea id="llama" class="abspos" cols="30" rows="10"></textarea>
    <div id="llamallama" class="abspos"></div>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function(){
            var $llama      = $('#llama');
            var $llamallama = $('#llamallama');
            $llamallama.width($llama.width());
            $llamallama.height($llama.height());
            $llamallama.on('click', function(){
                $llama.focus();
            });
            $llama.on('keyup', function(){
                if($(this).val().length > 14){
                    cleanText = $(this).val().slice(0, 14);
                    errorText = $(this).val().slice(14, $(this).val().length);
                    errorText = "<span class='error'>" + errorText + "</span";
                    textAreaText = cleanText + errorText;
                    $llamallama.html(textAreaText);
                } else {
                    $llamallama.html($(this).val());
                }
            });
            $llamallama.html($(llama).val());
        });
    </script>
</body>
</html>

Looking back, I realize I went through a llama phase. – Andrew Allbright Apr 25 '17 at 02:17 — Andrew Allbright, Apr 25 '17 at 02:17

score 0 · Answer 4 · answered Apr 30 '14 at 16:15

try this out

<html>
      <head>
        <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);
              val.css{'border','1px solid red';}
            } else {
              $('#charNum').text(500 - len);
              val.css{'border','1px solid black';}
            }
          };
        </script>
      </head>

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

</html>

Html textarea - color characters after maxlength

4 Answers4