textbox or textarea change font color based on character count

**RCgua** · 08-25-2011 02:37 PM

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?

**DracoMerest** · 08-25-2011 09:08 PM

Code:

<html>
 <body>
  <form>
   <input type="text" style="color:green;" onkeyup="this.style.color=(this.value.length>160)?'red':'green';">
  </form>
 </body>
</html>

**RCgua** · 08-26-2011 07:39 PM

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: textbox or textarea change font color based on character count

Thread Tools

Display

textbox or textarea change font color based on character count

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions