SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Maximum text ?? HTML and CSS maybe ??

    Hello,

    I am wanting to limit the amount of text entered into a text field. maxlength="500"

    The code works well if you are typing in the words, but if you copy and paste in the text field will accepts 100s more words/characters.

    This is what I have:

    HTML Code:
    <textarea rows="6" cols="45" maxlength="500" class="do_input" name="job_description">
    CSS is:

    .do_input {
    border: 1px solid #999999;
    border-radius: 5px;
    color: #666666;
    padding: 6px;

    .post-new li p {
    float: left;
    margin-top: 7px;
    overflow: hidden;
    width: 460px;

    How to stop over 500 characters being shown/displayed ?

    All help greatly appreciated

  2. #2
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update - added some code - yet still not limiting text characters:

    I added a <div class="textlimit">

    Code:
    <div class="textlimit">
                                <li><h2><?php echo __('Description', 'Theme'); ?></h2>
                                <p><textarea rows="6" cols="45" maxlength="500" class="do_input"  name="job_description"><?php 
                                echo empty($_POST['job_description']) ? stripslashes($post->post_content) : stripslashes($_POST['job_description']); ?></textarea><br/>
                                <?php _e('Min: 100 chars. Max: 500','Theme'); ?></p>
                                </li>
                                 </div>
    Then added CSS code:

    .textlimit p
    {
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    overflow:hidden;
    }

    all ideas and help appreciated

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RayWilk View Post
    All ideas and help appreciated
    The two possible methods of input into the text box - typing or pasting, lead to different possible responses by the document. Typing allows you to evaluate individual keystrokes while pasting requires that the focus on the text field changes to trigger the handler.

    I have tried to avoid these differences by installing a Go button. This does nothing more than force a change in focus when you click it. I have used javascript and a form containing the various elements to extract and compare values, and finally, to truncate the string as required. The limit shown can be set at any value of string length.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>max string length</title>
    <style type="text/css">
    body { font-family:arial, helvetica, sans-serif; font-weight:normal; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
    input { margin-right:10px; text-align:center; }
    #wrap { width:600px; height:500px; margin:20px; overflow:auto;  }
    .lftF { float:left; margin-right:20px; }
    #holder { overflow:auto; }
    #holder input { text-align:center; }
    </style>
    </head>
    
    <body>
    
    <div id="wrap">
      <form name="f2">
        <p>
        <input type="text" value="nondum amabam, et amare amabam, et secretiore indigentia oderam me minus" name="T1" size="70"><input type="button" onclick="getLength()" value="Go" name="B2"></p>
        <p><b>Limit:</b>&nbsp; <input type="text" value="50" name="limitT" size="10">&nbsp;
        <b>Original</b>&nbsp;&nbsp;
        <input type="text" value="72" name="actualT" size="10" readonly></p>
        <p><input type="reset" value="Reset" name="B2"></p>
      </form>
    </div>
    <!-- end wrap -->
    <script type="text/javascript">
     function getLength()
       { var df2=document.f2;
         var limitLength=df2.limitT.value;       
         var actualLength=df2.T1.value.length;
         df2.actualT.value=actualLength;
        // crop it
         if(limitLength<=actualLength)
           { df2.T1.value=df2.T1.value.substr(0,limitLength);  }   
       }
    </script>
    
    </body>
    
    </html>

  4. #4
    SitePoint Addict
    Join Date
    Feb 2012
    Location
    Kiwi in Bangkok
    Posts
    373
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alan Wow! Thank you very much

    I am going to have to spend some time trying to understand your code, and how to implement it into my page?

    your help and time greatly appreciated

  5. #5
    Non-Member sophiaking's Avatar
    Join Date
    May 2014
    Location
    South Africa
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what if you give the input form a fixed width and height and then add overflow hidden


Bookmarks

Posting Permissions

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