Limit users comment length with live typing progress bar

  • jessenco

    (@jessenco)


    18 years, 1 month ago

    Here is a Javascript that I use in WordPress blog to set the minimum and maximum length of user comments. This helps to prevent chitchat comment types, mostly very short ones, often irrelevant. I know it is not fool proof but it surely helps.

    It prevent the comment form from being submitted by disabling the submit button until the textarea has the right minimum accepted amount of characters in it. Once the minimum value is reach, the submit button become enabled and the comment form may be submitted.

    It also display a progress bar while typing indicating in percentage of how much characters has been used so far in the comment. When the maximum limit value is reach (100%), the comment is automatically truncate and no more characters can be add.

    // THIS COMES FROM DYNAMICDRIVE SCRIPTS.
    // IN THIS EXAMPLE YOUR FORM ID MUST BE id=”commentsform”
    // AND YOUR TEXTAREA id=”comment”.

    //PASTE THIS IN THE <HEAD> SECTION

    <HEAD>
    <script type=”text/JavaScript”>

    function textCounter(field,counter,maxlimit,linecounter) {
    // text width//
    var fieldWidth = parseInt(field.offsetWidth);
    var charcnt = field.value.length;
    var comment = 0; //fix Set the initial value of the textarea id comment

    // trim the extra text
    if (charcnt > maxlimit) {
    field.value= field.value.substring(0, maxlimit);

    }
    else {
    // progress bar percentage
    var percentage = parseInt(100 – (( maxlimit – charcnt) * 100)/maxlimit) ;
    document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+”px”;
    document.getElementById(counter).innerHTML=”Used: “+percentage+”%”

    // color correction on style from CCFFF -> CC0000
    setcolor(document.getElementById(counter),percentage,”background-color”);
    }
    }

    function setcolor(obj,percentage,prop){
    obj.style[prop] = “rgb(80%,”+(100-percentage)+”%,”+(100-percentage)+”%)”;
    }

    function CheckLength()
    {
    if (document.getElementById(“comment”).value.length < 400 ) {
    document.getElementById(“submit”).disabled=true;
    }
    else document.getElementById(“submit”).disabled=false;
    }

    </script>

    </HEAD>

    // THIS IS THE TEXTAREA SCRIPT YOU NEED TO DISPLAY THE PROGRESS BAR AND
    // PREVENT THE MESSAGE FROM BEING TOO LONG.
    // IT IS SET TO 9000 CHARACTERS MAXIMUM WHICH CAN BE CHANGE TO ANY VALUE YOU WANT.
    // OF COURSE, TO WORK AS INTENDED THE MAXIMUM VALUE MUST BE HIGHER
    // THAN THE MINIMUM VALUE
    // AGAIN BE SURE TO ID YOUR FORM AS “commentsform” AND YOUR TEXTAREA AS “comment”.

    —Such in this WORDPRESS EXAMPLE: <form action=”<?php echo get_option(‘siteurl’); ?>/wp-comments-post.php” method=”post” name=”commentsform” id=”commentsform”> —

    <FORM ACTION=”myactionform” METHOD=”post” ID=”commentsform”>

    <textarea onKeyDown=”textCounter(this,’progressbar1′,9000)”
    onKeyUp=”textCounter(this,’progressbar1′,9000), CheckLength()”
    onFocus=”textCounter(this,’progressbar1′,9000)”
    name=”comment” id=”comment” cols=”80%” rows=”10″>
    </textarea><div id=”progressbar1″ class=”progress”>
    <script>textCounter(document.getElementById(“commentsform”),”progressbar1″,9000)</script>

    //THIS IS THE SCRIPT YOU NEED TO USE TO DISABLE THE SUBMIT BUTTON
    // UNTIL THERE IS AT LEAST 400 CHARACTERS TYPED IN THE TEXTAREA.
    // IN THIS EXAMPLE YOUR SUBMIT BUTTON MUST BE ID “submit” ALSO.

    <input name=”submit” disabled=”disabled” type=”submit” id=”submit” onchange=”CheckLength()” value=”Submit” />

    </FORM>

    I am sure there is a better way to do it and for sure it can be optimize but it works and looks cool.
    My point is hopefully this will be implemented in WordPress as it is a convenient feature to restrained unnecessary very short or way too long comments.

Viewing 1 replies (of 1 total)
  • mclapp

    (@mclapp)

    18 years ago

    This was just what I was looking for. However, my submit button disapears and never shows up again one I begin typing. Do you have a live example running somewhere?

Viewing 1 replies (of 1 total)
  • The topic ‘Limit users comment length with live typing progress bar’ is closed to new replies.