www.webdeveloper.com
Results 1 to 3 of 3

Thread: textbox or textarea change font color based on character count

Hybrid View

  1. #1
    Join Date
    Apr 2011
    Posts
    13

    textbox or textarea change font color based on character count

    I want to implement a text input box for SMS text messages and the messages are limited to 160 characters (including spaces, etc.). I would like the font color of the text to be green as the user types and any text beyond 160 characters to be red. I would like to do this with one input box, the same box that the user is typing in not a separate display box. This will be on the users local PC it won't be on the Internet.
    Does anyone have any ideas or know of a solution?

  2. #2
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    Code:
    <html>
     <body>
      <form>
       <input type="text" style="color:green;" onkeyup="this.style.color=(this.value.length>160)?'red':'green';">
      </form>
     </body>
    </html>
    Last edited by DracoMerest; 08-25-2011 at 10:08 PM. Reason: forgot to change from test value of 10 to real value of 160

  3. #3
    Join Date
    Apr 2011
    Posts
    13
    Thanks for the code you got me pointed in the right direction. I need to show the text that is 160 characters and under in green and the text over 160 characters in red. Below is what I have so far, it more or less works correctly but the formatting is ugly. Is it possible for the text in the textarea box to get replaced with the green/red text? Or, if not, does anyone have any ideas for making the red/green text look better, maybe forcing it to display to the right of the textarea input box?
    Thanks for your help, support, knowledge and expertise.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1250">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title></title> 
    <script type="text/javascript">
    <!--
    function colourText(){
    
    document.getElementById("display2").innerHTML=""
    
    savedStr=document.getElementById("smsText").value
    savedStrGREEN=savedStr.substring(0,160)
    savedStrRED=savedStr.substring(160)
    
    document.getElementById("display2").innerHTML+="<span id=display12>" + savedStrGREEN + "</span>" + "<span id=display13>" + savedStrRED + "</span>"
    
    document.getElementById("display12").style.color="green"
    document.getElementById("display13").style.color="red"
    }
    //-->
    </script>
    <style type="text/css">
    textarea {
            width: 500px;
            height: 120px;
            border: 3px solid #cccccc;
            padding: 5px;
            font-family: Tahoma, sans-serif;
            background-image: url(bg.gif);
            background-position: bottom right;
            background-repeat: no-repeat;
            clear:both;
            font-weight:bold;
            font-size:18px;
    }
    </style>
      </head>
      <body>
    <br><br><br>
    
    <div id="display2" style="float:right;margin-right:50%;margin-left:0px;margin-top:0px;font-weight:bold;font-size:18px;font-family: Tahoma, sans-serif;"></div>
    <div style="margin-left:66px">
    <textarea name="styled-textarea" cols="20" rows="10" id="smsText" onkeyup="colourText(id)">
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles