Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
10 posts Page 1 of 1
Hi, is it possible to have a character counter that updates with the typing of text on the input boxes in the admin?

I know I can restrict the characters but would like (if possible) to visually show the client how much room he has left as he types to make things easier in the restrictive places of the site.

If this is not available natively in couch, is there a way to manually add this functionality?

Thanks!
There's no native character counter in Couch. The way to implement one would be with JavaScript.

You could cook one up for yourself by putting a script in a message-type editable tag.
Notice: The code snippets below have been improved and packaged into a shiny new custom tag. I'm sure you'll like it better. viewtopic.php?f=8&t=10339

Here is a countdown type, Twitter-style character counter hacked into a message-type editable region. Be sure to place this editable after the region that you want to count or it won't work.

Enter the maximum number of characters and the name of the input field to be counted in the two variables at the beginning of the script.

Code: Select all
    <!-- CHARACTER COUNTER -->
    <cms:editable name='char_counter' type='message'>
        <p>Count: <span id="counter"></span></p>

        <script type="text/javascript">
            var max = 256;
            var field_name = "description";
            field_name = "f_" + field_name;     
            target = document.getElementById(field_name);
   
            target.onfocus = function(){countChars(target, 'counter', max)};
            target.onkeyup = function(){countChars(target, 'counter', max)};
            target.onkeydown = function(){countChars(target, 'counter', max)};
   
            function countChars(target, counter, max) {
                var count = max - target.value.length;
                if (count < 0){
                    document.getElementById(counter).innerHTML = "<span style=\"color: red;\">" + count + "</span>";
                }else{
                    document.getElementById(counter).innerHTML = count;
                }
            }
        </script>
    </cms:editable>
@tim

Thanks for the code, I was going to reply to your last message that I did not know how to do this.

I am putting this in a repeatable region, will it still work? It is for the slider captions that go on the homage of the site. This template is in homepage-slides.php

I am using textarea because in the repeatable region to type in a text box seemed not very function.
Screenshot: http://d.pr/i/134Gs

Code: Select all
<cms:template title='Slides' order='10' >

   <cms:repeatable name='home_captions' label='Homepage Caption Slides' desc='Home Page Caption Slider' order='1' >
      <cms:editable name='title' label='Title' type='text' />
      <cms:editable name='content' label='Content' type='textarea' />
         <!-- CHARACTER COUNTER -->
          <cms:editable name='char_counter' type='message'>
              <p>Count: <span id="counter"></span>

              <script type="text/javascript">
                  var max = 256;
                  var field_name = "description";
                  field_name = "f_" + field_name;
                 
                  target = document.getElementById(field_name);
         
                  target.onfocus = function(){countChars(target, 'counter', max)};
                  target.onkeyup = function(){countChars(target, 'counter', max)};
                  target.onkeydown = function(){countChars(target, 'counter', max)};
         
                  function countChars(target, counter, max) {
                      var count = max - target.value.length;
                      if (count < 0){
                          document.getElementById(counter).innerHTML = "<span style=\"color:red;\">" + count + "</span>";
                      }
                      else{ document.getElementById(counter).innerHTML = count; }
                  }
                  </script>
          </cms:editable>
      <cms:editable name='button_title' label='Button Title' type='text' />
      <cms:editable name='button_link' label='Button Link' type='text' />
   </cms:repeatable>

</cms:template>
I am putting this in a repeatable region, will it still work?

No. This is meant to relate to a single editable region. I'm not sure this type of hack is suitable for repeatables.
Hi Tim

Okay, hopefully KK may have a solution for doing this in the repeatable. I so appreciate you helping and this code will help in other places so it won't go to waste! Will use it on non repeatable regions for sure! :)

Are there any other way to handle repeatable regions? I almost "wish" they did not lay out horizontally and I could do them more like a editable region group displays with a button below to add another row group for the sliders. :) Would look much better for the repeatable regions that I have 5-8 fields in with images and the likes. :(
Repeatable regions are cool, but they have their limitations. I think the new admin panel will improve the display options for repeatables. We'll have to wait and see.

If a repeatable doesn't work, a clonable template is a more flexible alternative. This counter will work on a clonable template.
nice snippet, works as intended, thx for the code
Hi KK,

Any thoughts on how I can do a character counter in a repeatable region text box or textarea?
Here you go, John. This is the same sort of Twitter-style counter. Be sure to place it after the repeatable region in your template.

Set the three variables at the beginning of the script with your max number of characters, the name of the repeatable, and the name of the editable to be counted.
Code: Select all
    <!-- CHARACTER COUNTER -->
    <cms:editable name='repeatable_counter' type='message'>
        <script type="text/javascript">
            var max = 140;
            var repeatable_name = "my_repeatable";
            var editable_name = "my_editable";
           
            var target='1';
            for (var i = 0; target; i++){
                field_name = "f_" + repeatable_name + "-" + i + "-" + editable_name;
                target = document.getElementById(field_name);
                 
                var counter = document.createElement('span');
                var br = document.createElement('br');
                var counter_id = "counter" + i;
                counter.setAttribute('id', counter_id);
                target.parentNode.appendChild(br);
                target.parentNode.appendChild(counter);
               
                var count = max - target.value.length;
                document.getElementById(counter_id).innerHTML = count;
               
                target.setAttribute('onkeydown', 'countChars("'+field_name+'", "'+counter_id+'", "'+max+'");');
                target.setAttribute('onkeyup', 'countChars("'+field_name+'", "'+counter_id+'", "'+max+'");');
            }
                           
            function countChars(target, counter, max) {
                var count = max - document.getElementById(target).value.length;
                if (count < 0){
                    document.getElementById(counter).innerHTML = "<span style=\"color: red;\">" + count + "</span>";
                }else{
                    document.getElementById(counter).innerHTML = count;
                }
            }
        </script>
    </cms:editable>
10 posts Page 1 of 1