Creating "smart" text entry fields of limited length

Here is my situation,

I am creating a content management system for my users to edit their homepage (all of the homepages are based on a simple template). I have a form in the administration area with a simple textarea which contains the current content of one of the editable texts on the homepage, when users submit that form it is entered into my mySQL database and when a visitors look at their homepage this text is pulled from the db and shown in the template... pretty standard. The problem is that I have certain text fields in the template which can only contain so-much text. If they are too long, they will overflow and break up my design.

How can I limit the amount of text entered by the user so that it doesn't overflow... Don't get me wrong, I know how to check the length of the string entered and return an error or trim off the excess... But how do I know how much text will fit in the "box" considering line breaks, long words which are "word wrapped" to the next line etc.

Here's an example to put it more simply... If I know that I need to fill up a text area which is 40 characters wide and 3 lines high... how can I figure out if a string is too long
Obviously "the<br><br><br><br>quick" might be too long while "the quick brown fox jumped over the lazy dog seventeen times yesterday" may fit, even though there are less characters... So just checking the length of the string is not enough...
zzzrByteAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

BatalfCommented:
If you want to do it with PHP, you could check the length after stripping tags.

$length = strlen(strip_tags($inputString));
0
BatalfCommented:
Or maybe you could simply hide the overflow in your "box"

Example:
<div id="myID" style="overflow:hidden;height:20px;width:100px"><p>This is the content of this box.</div>
0
zzzrByteAuthor Commented:
1. The length may be fine, but I want to retain the linebreaks and still see that it doesn't overflow.
2. I want to be able to show the user that his text is too long, and have a chance to fix it.
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

SilversoftCommented:
Hmmm, If i understand you correctly, I don't think there is a way of  determining the length of text that will fit a certain area. As font-size, font-weight, font type varies the length of the text string.
But I know there is a way you can do it if your text is graphic that is generated using GD2 and truetype fonts, you can calculate the actual text bounding box area of the text and can do adjustments accordingly, i.e. using imagettfbbox(); function, which i dont think it relevant to your question.

Someone please correct me if i am wrong.
0
BatalfCommented:
Maybe you could have a hidden div on the page and set the content of it to the content of your textarea as you type. Then you would solve your HTML-problem and word-wrap.

Example: Look at the status bar:

<div id="myID" style="visibility:hidden;width:100px"></div>
<form>
<TEXTAREA cols="20" rows="5" onkeydown="document.all.myID.innerHTML=this.value;self.status=document.all.myID.clientHeight" name="ta"></textarea>
</body>
</html>
0
BatalfCommented:
That's the closes I get, but it wouldn't work in all browsers.
0
BatalfCommented:
And this is the same code, slightly modified

1) On key up to get the last value of the textarea
2) Converted \n to <br>

<div id="myID" style="visibility:hidden;width:100px"></div>
<form>
<TEXTAREA cols="20" rows="5" onkeyup="document.all.myID.innerHTML=this.value.replace('\n','<br>');self.status=document.all.myID.clientHeight" name="ta"></textarea>
</body>
</html>
0
RoonaanCommented:
Isn't it just the site-admins responsibility to keep text within margins? As cms-developer you could offcourse add an overflow:hidden to the designated area, such that any excess of text will not be visible, but I personally would just add a reminder at the input panel saying that they should mind about the limited space available.

Regards

-r-
0
zzzrByteAuthor Commented:
RooNaan: Ofcourse it is their responsibility, but the bottom line is that those admins are not very techy (actually, some barely know how to use Google), so it is hard to explain those things to them and count on them to do it. Also, what they are changing is a site branded with my company's identity... If they make it look bad, my company looks bad. Bottom line is, I have to protect them from themselves.
0
zzzrByteAuthor Commented:
No one has a solution to this?

Even if it is one of those word like editors that you embed in your page for WYSIWYG editing... If it has the functionality I am looking for, and is not too expensive.
0
BatalfCommented:
Did you check out my possible solution?

<div id="myID" style="visibility:hidden;width:100px"></div>
<form>
<TEXTAREA cols="20" rows="5" onkeyup="document.all.myID.innerHTML=this.value.replace('\n','<br>');self.status=document.all.myID.clientHeight" name="ta"></textarea>
</body>
</html>
0
mrwebdevCommented:
Comment from mrwebdev
Date: 11/07/2004 01:20PM CST
      Your Comment       

Make a single table (for the text spoken of) with a set width and make sure the NOWRAP is NOT selected!
It will wrap!

Hope this helps!

Comment from mrwebdev
Date: 11/07/2004 01:24PM CST
      Your Comment       

Also you can try making your input field like:

<textarea name="Your FieldName" cols="30" rows="4" wrap="VIRTUAL"><%=(Recordset1.Fields.Item("YourFieldName").Value)%></textarea>
0
zzzrByteAuthor Commented:
I am familiar with the wrap attribute for the textarea and with overflow:hidden... I am using both.
But I need a way to limit the user from entering more text then can fit in there... to STOP him when too much text has been entered.

Batalf's idea may be a partial solution if I add some JavaScript around it to stop the user from entering more text once the div's height has passed a certain threshold... It's not elegant, but it might work.
But I was hoping for a server side solution to this... Anybody has any other ideas?
0
BatalfCommented:
Here's another code example. This one make's it impossible for users to type any more when the there's not enough space. I have also placed the <div> at the bottom of the page.

<form>
<script language="Javascript">
var okToType=true;
var maxHeight = 50; // Max height of container in pixels
// 8 = Backspace
// 46 = Delete
function checkSize(){
      document.all.myID.innerHTML=document.forms[0].ta.value.replace('\n','<br>');
      if(document.all.myID.clientHeight>maxHeight)okToType=false; else okToType=true;
}
</script>
<TEXTAREA cols="20" onkeydown="if(event.keyCode!=8 && event.keyCode!=46)return okToType" onkeydown="alert(event.keyCode) rows="5" onkeyup="checkSize()" name="ta"></textarea>
<div id="myID" style="visibility:hidden;width:100px"></div>
</body>
</html>
0
BatalfCommented:
If you won't to do this on the server, a tip could be to create a temporary pdf with the width of your "box". Then use pdf_show_boxed to put the text on the pdf. When this is done, check the height of the pdf and compare it to max allowed with of your "box".

Batalf
0
zzzrByteAuthor Commented:
A couple of things I noticed:
1. Once the max height has been reached, the cursor is frozen... it will return false on everything but backspace and delete, including trying to move the cursor with the arrow keys, home/end/pgup/pgdn/etc.
2. If a user comes to this form, pastes a large text and hits the submit button it will pass. Of course it is possible to check for okToType on submit too, but the user will not know how much text he has to delete for it to fit in... It can become very frustrating for the user (paste... submit... too long... edit... submit... still too long... edit... submit... still too long... frustration!)
0
BatalfCommented:
Maybe a change in font style in the textarea is a better idea

<html>
<body>
<form>
<script language="Javascript">
var maxHeight = 50;
function checkSize(obj){
      document.all.myID.innerHTML=document.forms[0].ta.value.replace('\n','<br>');
      if(document.all.myID.clientHeight>maxHeight){
            obj.className='maximumLengthReached';      
      }else{
            obj.className='okToType';
      }
}
</script>
<STYLE type="text/css">
.okToType{color:#0000FF;}
.maximumLengthReached{color:#FF0000!important}
</style>
<TEXTAREA class="okToType" id="ta" cols="20" rows="5" onkeyup="checkSize(this)" name="ta"></textarea>
<div id="myID" class="okToType" style="visibility:hidden;width:100px"></div>
</form>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mrwebdevCommented:
Googled this, maybe this can help a little,
Hope you get your problem solved soon
Good Luck and best wishes!

http://www.cs.tut.fi/~jkorpela/forms/textarea.html

0
zzzrByteAuthor Commented:
I was hoping for a PHP solution, but I ended up using Batalf's very creative idea. Thanks.
0
BatalfCommented:
Thank you for the "A".
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.