PDA

View Full Version : [TIP] How to limit the textarea's row and character number



quasimidi
Aug 09, 2010, 3:55 PM
Put this lines between your header tags:



<script type="text/javascript">
var alert_title = 'Input Restriction';

function limitTextarea(el, maxLines, maxChar) {
if (!el.x) {
el.x = uniqueInt();
el.onblur = function() { clearInterval(window['int' + el.x]) }
}
window['int' + el.x] = setInterval(function() {
var lines = el.value.replace(/\r/g, '').split('\n'), i = lines.length, lines_removed, char_removed;
if (maxLines && i > maxLines) {

// This is where I have to customize the alert for limiting the lines
alert('You can not enter more than ' + maxLines + ' lines');
lines = lines.slice(0, maxLines);
lines_removed = 1
}
if (maxChar) {
i = lines.length;
while (i-- > 0) if (lines[i].length > maxChar) {
lines[i] = lines[i].slice(0, maxChar);
char_removed = 1
}
if (char_removed) {

// This is where I have to customize the alert for limiting the characters per line
alert('You can not enter more than ' + maxChar + ' characters per line');

}
}
if (char_removed || lines_removed) el.value = lines.join('\n')
}, 50);
}

function uniqueInt() {
var num, maxNum = 100000;
if (!uniqueInt.a || maxNum <= uniqueInt.a.length) uniqueInt.a = [];
do num = Math.ceil(Math.random() * maxNum);
while (uniqueInt.a.hasMember(num))
uniqueInt.a[uniqueInt.a.length] = num;
return num
}

Array.prototype.hasMember = function(testItem) {
var i = this.length;
while (i-- > 0) if (testItem == this[i]) return 1;
return 0
};

function set_ie_alert() {
window.alert = function(msg_str) {
vb_alert(msg_str)
}
}
</script>


In markup put (where 7 is the max lines allowed and 35 is the max chars allowed):


<ext:FormLayout ID="FormLayout1" runat="server" LabelWidth="100">
<Anchors>
<ext:Anchor Horizontal="100%">
<ext:ComboBox ID="cbbNewMessageSendTo" runat="server" FieldLabel="Send to" StoreID="storeAssetsWithMessaging"
Editable="false" TypeAhead="true" Mode="Local" ForceSelection="true" TriggerAction="All"
DisplayField="Name" ValueField="ID" EmptyText="Select asset to send to" meta:resourceKey="cbbNewMessageSendTo">
<Listeners>
<Select Fn="MessageAssetSelectionChanged" />
</Listeners>
</ext:ComboBox>
</ext:Anchor>
<ext:Anchor Horizontal="100%" Vertical="-20">
<ext:TextArea ID="taNewMessage" runat="server" HideLabel="true" EnableKeyEvents="true">
<Listeners>
<KeyPress Handler="limitTextarea(document.getElementById('taNewMessag e'),7,35); " Buffer="1" />
</Listeners>
</ext:TextArea>
</ext:Anchor>
</Anchors>
</ext:FormLayout>

Hope it helps someone too....

:)

Daniil
Aug 26, 2010, 9:20 AM
Hello!

Thank you for sharing it.
Here is a full sample code.

Example


<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>

<script type="text/javascript">
var alert_title = 'Input Restriction';

function limitTextArea(el, maxLines, maxChar) {
if (!el.x) {
el.x = uniqueInt();
el.onblur = function() { clearInterval(window['int' + el.x]) }
}
window['int' + el.x] = setInterval(function() {
var lines = el.value.replace(/\r/g, '').split('\n'), i = lines.length, lines_removed, char_removed;
if (maxLines && i > maxLines) {

// This is where I have to customize the alert for limiting the lines
alert('You can not enter more than ' + maxLines + ' lines');
lines = lines.slice(0, maxLines);
lines_removed = 1
}
if (maxChar) {
i = lines.length;
while (i-- > 0) if (lines[i].length > maxChar) {
lines[i] = lines[i].slice(0, maxChar);
char_removed = 1
}
if (char_removed) {

// This is where I have to customize the alert for limiting the characters per line
alert('You can not enter more than ' + maxChar + ' characters per line');

}
}
if (char_removed || lines_removed) el.value = lines.join('\n')
}, 50);
}

function uniqueInt() {
var num, maxNum = 100000;
if (!uniqueInt.a || maxNum <= uniqueInt.a.length) uniqueInt.a = [];
do num = Math.ceil(Math.random() * maxNum);
while (uniqueInt.a.hasMember(num))
uniqueInt.a[uniqueInt.a.length] = num;
return num
}

Array.prototype.hasMember = function(testItem) {
var i = this.length;
while (i-- > 0) if (testItem == this[i]) return 1;
return 0
};

function set_ie_alert() {
window.alert = function(msg_str) {
vb_alert(msg_str)
}
}
</script>

</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:TextArea ID="TextArea1" runat="server" EnableKeyEvents="true">
<Listeners>
<KeyPress Handler="limitTextArea(document.getElementById('TextArea1') , 7, 35);" Buffer="1" />
</Listeners>
</ext:TextArea>
</form>
</body>
</html>