|
MaxLength in ASP:TextBox
Control
To restrict the length of a textbox
control we can set the maximum length with a property called MaxLength.
But, when we use the ASP.Net TextBox control as a multiline TextBox by setting
TextMode property as MultiLine, the MaxLength property will not work. It is
because the multiline textbox will be rendered as <TextArea> which does
not support maximum length property (MaxLength).
The below JavaScript function can be
used to restrict the user from entering more than restricted length.
function limitCharsLength(Object,
MaxLen)
{
if(Object.value.length >
(MaxLen-1))
{
return false;
}
}
<asp:TextBox ID="TextBox2"
runat="server" onkeypress="javascript: return limitCharsLengthDefault(this,10);"
Rows="10" TextMode="MultiLine"></asp:TextBox>
Drawback of the above
method
The above function will restrict the
user to type more than 10 characters in the textbox but it does not validate the
maximum length when the user copy pastes the content from elsewhere into the
text box. So, the above function can be rewritten as,
function limitCharsLength(Object,
MaxLen)
{
if(Object.value.length >
MaxLen-1)
{
Object.value=
Object.value.substring(0,MaxLen);
}
}
<asp:TextBox runat="server"
ID="txtComments" onkeypress="javascript: return limitCharsLength(this,300);"
onblur="javascript:return limitCharsLength(this, 300)" onchange="javascript :
return limitCharsLength(this, 300)" TextMode="MultiLine"
Rows="10"></asp:TextBox>
This function will not allow a user to
type or copy paste contents with length greater than the specified
length.
Passing Date from Calendar Pop-Up to
Parent Window
This section will help us building a
simple DatePicker control using Calendar control and Javascript. Create two aspx
pages, Default.aspx and Calendar.aspx. Calendar.aspx will contain a Calendar
control and it should be opened as a popup window. When the user selects a date
in the Calendar popup it will populate the date selected into a textbox in the
Default.aspx page.
Default.aspx
1) Drag a TextBox and name it as
‘txtDate’.
2) Drag an Html Button and change the
text as ‘Date’.
Write a JavaScript function to open the
popup that is containing the Calender Control.
function PopupPicker(ctl)
{
var PopupWindow=null;
PopupWindow=window.open('Calender.aspx?ctl='+ctl,'','width=250,height=250’);
PopupWindow.focus();
}
Pass the textbox control id to the
popup windows in a QueryString (ctl), so that the popup window can populate the
textbox control with the date selected in the Calendar control.
<input id="Button2" type="button"
value="Click" onclick="PopupPicker('txtDate');"/>
Calender.aspx
1) Drag a Calendar Control to the
webform.
2) Get the TextBox Control Name which
is sent in query string.
3) Create a JavaScript function called
“SetDate” which accepts 2 parameters, dateValue and ctl. dateValue is the date
selected by the user in the calendar popup and ctl is the parent page control id
where we need to populate the date selected.
(The code is self
explanatory).
function SetDate(dateValue,ctl)
{
thisForm =
window.opener.document.forms[0].elements[ctl].value= dateValue;
self.close();
}
4) In clnDatePicker_DayRender Event,
write the following code to call a javascript function ‘SetDate’.
HyperLink hpl = new
HyperLink();
hpl.Text =
((LiteralControl)e.Cell.Controls[0]).Text;
hpl.NavigateUrl = "javascript:SetDate('" +
e.Day.Date.ToShortDateString() + "','"+ctrl+"');";
e.Cell.Controls.Clear();
e.Cell.Controls.Add(hpl);
By default, the days in calendar control is rendered as links and generate a postback when it is clicked. Instead of
postback, we will call our custom SetDate() JavaScript function by changing the
cell of the Calendar control to Hyperlink control and attaching the SetDate()
JavaScript function to the hyperlink in clnDatePicker_DayRender
event.
|