Maximum text ? HTML and CSS maybe?

HTML & CSS
1

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:

<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 :slight_smile:

2

Update - added some code - yet still not limiting text characters:

I added a <div class=“textlimit”>

<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 :slight_smile:

3

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.


<!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

Alan Wow! Thank you very much :slight_smile:

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 :slight_smile:

5

what if you give the input form a fixed width and height and then add overflow hidden