Solved

Creating "smart" text entry fields of limited length

Posted on 2004-11-01
306 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
Question by:zzzrByte
    20 Comments
     
    LVL 32

    Expert Comment

    by:Batalf
    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
    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
    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
     
    LVL 2

    Expert Comment

    by:Silversoft
    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
    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
    That's the closes I get, but it wouldn't work in all browsers.
    0
     
    LVL 32

    Expert Comment

    by:Batalf
    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
    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
    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
    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
    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
    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
    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
    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
    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
    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:
    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
    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
    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
    Thank you for the "A".
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    As you all know PHP got one problem, before using other files classes or functions you need to include or use require function. But now in PHP 5 there's solution for this, it's called __autoload() function. You can read more about function in PHP ma…
    SQL injection vulnerabilities have been described as one of the most serious threats for Web applications. Web applications that are vulnerable to SQL injection may allow an attacker to gain complete access to their underlying databases. Because…
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

    911 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

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now