[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Creating "smart" text entry fields of limited length

Posted on 2004-11-01
20
Medium Priority
?
318 Views
Last Modified: 2008-03-17
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...
0
Comment
Question by:zzzrByte
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 6
  • 2
  • +2
20 Comments
 
LVL 32

Expert Comment

by:Batalf
ID: 12462635
If you want to do it with PHP, you could check the length after stripping tags.

$length = strlen(strip_tags($inputString));
0
 
LVL 32

Expert Comment

by:Batalf
ID: 12462672
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
 

Author Comment

by:zzzrByte
ID: 12462858
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Expert Comment

by:Silversoft
ID: 12462875
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
 
LVL 32

Expert Comment

by:Batalf
ID: 12463020
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
 
LVL 32

Expert Comment

by:Batalf
ID: 12463032
That's the closes I get, but it wouldn't work in all browsers.
0
 
LVL 32

Expert Comment

by:Batalf
ID: 12463054
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
 
LVL 49

Expert Comment

by:Roonaan
ID: 12463278
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
 

Author Comment

by:zzzrByte
ID: 12464471
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
 

Author Comment

by:zzzrByte
ID: 12517618
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
 
LVL 32

Expert Comment

by:Batalf
ID: 12518134
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
 
LVL 6

Expert Comment

by:mrwebdev
ID: 12519218
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
 

Author Comment

by:zzzrByte
ID: 12519564
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
 
LVL 32

Expert Comment

by:Batalf
ID: 12519607
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
 
LVL 32

Expert Comment

by:Batalf
ID: 12519622
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
 

Author Comment

by:zzzrByte
ID: 12519682
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
 
LVL 32

Accepted Solution

by:
Batalf earned 2000 total points
ID: 12521549
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
 
LVL 6

Expert Comment

by:mrwebdev
ID: 12524179
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
 

Author Comment

by:zzzrByte
ID: 12577424
I was hoping for a PHP solution, but I ended up using Batalf's very creative idea. Thanks.
0
 
LVL 32

Expert Comment

by:Batalf
ID: 12578194
Thank you for the "A".
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
This article discusses four methods for overlaying images in a container on a web page
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

650 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question