restrict breaks or excessive spaces in text area? - html

Question

Can someone please help me, i have a text area and i have limited the number of characters in it so that the text area fits the content in it without the content overflowing.
Character length works but this doesn't stop the user currently using the space bar to create breaks or excessive spacing, i.e. more than one space. is there a way i can make the text area stop users spacing characters more than once and forbid line breaks?
Sorry if this is a really obvious question but im looking for an answer everywhere and cant find one anywhere.
<form action="includes/change_status.php" id="form2" method="post" name="form2">
<div class="status-border-top"></div>
<div class="status-border">
<textarea data-id="status" id="status" maxlength="80" name="status" style="width: 187px; margin-top:-4px; text-align:left; padding-left:5px; padding-top:3px; padding-bottom:2px; padding-right:3px; margin-left:-4px; height: 54px; font-size:12px; resize: none; border: hidden; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; position:relative; z-index:100;"><?php echo htmlspecialchars ($profile['status']); ?></textarea>
<input class="status-submit" id="submit" name="submit" src="../PTB1/assets/img/icons/save-status.png" type="image" value="submit">
</div>
</form>

Answer 1

This is how you can remove double spaces or line breaks that the user enters into the textarea.
You'll need to use the latest version of jQuery for this to work.
Working example on jsFiddle.
HTML:
<form action="/" method="post">
<textarea cols="33" rows="12" id="message"></textarea>
</form>
JavaScript:
var $message = $("#message");
$message.on("keydown keypress", function() {
var $this = $(this),
val = $(this).val()
.replace(/(\r\n|\n|\r)/gm," ") // replace line breaks with a space
.replace(/ +(?= )/g,''); // replace extra spaces with a single space
$this.val(val);
});

Answer 2

Another option without jQuery is to compare the currently assigned key to the previous key. If they are the same, and both are in the set of illegal keys, refuse the keypress action. This approach will not change the starting text in any way, no matter what spacing that has.
HTML:
<form action="includes/change_status.php" id="form2" method="post" name="form2">
<div class="status-border-top"></div>
<div class="status-border">
<!-- notice the onkeypress attribute -->
<textarea data-id="status" id="status" maxlength="80" name="status" style="width: 187px; margin-top:-4px; text-align:left; padding-left:5px; padding-top:3px; padding-bottom:2px; padding-right:3px; margin-left:-4px; height: 54px; font-size:12px; resize: none; border: hidden; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; position:relative; z-index:100;" onkeypress="return ignoreSpaces(event);"><?php echo htmlspecialchars ($profile['status']); ?></textarea>
<input class="status-submit" id="submit" name="submit" src="../PTB1/assets/img/icons/save-status.png" type="image" value="submit">
</div>
</form>
Javascript:
var lastkey;
var ignoreChars = ' \r\n'+String.fromCharCode(0);
function ignoreSpaces(e){
e = e || window.event;
var char = String.fromCharCode(e.charCode);
if(ignoreChars.indexOf(char) >= 0 && ignoreChars.indexOf(lastkey) >= 0){
lastkey = char;
return false;
}else{
lastkey = char;
return true;
}
}
working JFiddle: http://jsfiddle.net/mLYgD/1/

Answer 3

Without client-side scripting, you cannot impose such restrictions.
Since you want to allow at most 80 characters and to disallow line breaks, it would seem to be more adequate to use an input type=text element than a textarea.
Moreover, for input type=text, you can impose restrictions using the HTML5 pattern attribute. Though not supported by old browsers, it works in modern browsers even when client-side scripting has been disabled. You could use code like this:
<input type="text" data-id="status" id="status" maxlength="80" size="80"
name="status" pattern="\s?(\S+\s?)*">
The size attribute specifies the visible width of the field in (average-width) characters. The default font face and font size in an input box depends on the browser, but usually the face is not monospace, unlike in textarea. So if monospace font is desired, set it in CSS.
The value of the pattern attribute has the same syntax as JavaScript regular expressions, except that the match is for the entire input string (so a leading ^ and a trailing $ are implied). The notation \s means any whitespace character (in this context, this means a space in practice), and \S means any non-whitespace character, so the expression allows spaces but not in succession. The leading part \s allows a single leading space; remove it if you don’t want to allow that.
You can use JavaScript to implement the pattern attribute in browsers that do not natively support the attribute but have scripting enabled. Or you can just have JavaScript that uses the same expression (with ^ and $ added).