DevExpress TextBox Karakter Saydırma ve Sınırlama (MaxLength, ValueLength, CharsRemaining)
.NET ve Devexpress’te kullanmış olduğumuz textbox nesnesinde girilen karakterleri saydırarak fazla karakter girilmesinin önüne geçilmesi için kullanılması gereken kod bloklarını paylaşacağım. İşin iki farklı tarafı bulunuyor. Öncelikle bu özelliği kullanmak istediğiniz sayfada aşağıdaki scripti ekliyoruz. Ben bu kodları ilgili sayfamın navcontent alanına ekledim.
<%--KALAN KARAKTER ALANI BURADAN BAŞLIYOR--%>
<script type="text/javascript">
function RecalculateCharsRemaining(editor) {
var maxLength = parseInt(editor.maxLength ? editor.maxLength : editor.GetInputElement().maxLength);
var editValue = editor.GetValue();
var valueLength = editValue != null ? editValue.toString().length : 0;
var charsRemaining = maxLength - valueLength;
SetCharsRemainingValue(editor, charsRemaining >= 0 ? charsRemaining : 0);
}
function SetCharsRemainingValue(textEditor, charsRemaining) {
var associatedLabel = ASPxClientControl.GetControlCollection().Get(textEditor.name + "_cr");
var color = GetLabelColor(charsRemaining).toString();
associatedLabel.SetText("<span style='color: " + color + ";'>" + charsRemaining.toString() + "</span>");
}
function GetLabelColor(charsRemaining) {
if (charsRemaining < 5) return "red";
if (charsRemaining < 12) return "#F3A250";
return "green";
}
// ASPxMemo - MaxLength emulation
function InitMemoMaxLength(memo, maxLength) {
memo.maxLength = maxLength;
}
function EnableMaxLengthMemoTimer(memo) {
memo.maxLengthTimerID = window.setInterval(function () {
var text = memo.GetText();
if (text.length > memo.maxLength) {
memo.SetText(text.substr(0, memo.maxLength));
RecalculateCharsRemaining(memo);
}
}, 50);
}
function DisableMaxLengthMemoTimer(memo) {
if (memo.maxLengthTimerID) {
window.clearInterval(memo.maxLengthTimerID);
delete memo.maxLengthTimerID;
}
}
</script>
<%--KALAN KARAKTER ALANI BURADA BİTİYOR--%>
Sonrasında ilgili Textbox’ın içerisine ClientSideEvents kod bloğunu ekliyoruz.
<ClientSideEvents Init="RecalculateCharsRemaining" KeyDown="RecalculateCharsRemaining" KeyUp="RecalculateCharsRemaining" />
Daha sonra Textbox’ı kapattıktan sonra da aşağıdaki kod bloğunu ekliyoruz.
<span class="chrm" style="font-size: 11px">Kalan Karakter Sayısı:
<dx:ASPxLabel ID="TxtSunucuRolu_cr" runat="server" EnableClientSideAPI="True" Font-Size="11px" />
</span>
Kodların tamamını örnek olarak aşağıdaki şekilde paylaşıyorum.
<dx:LayoutItem Caption="CAPTION ADI" FieldName="CAPTION_ADI" CaptionStyle-Font-Bold="true">
<LayoutItemNestedControlCollection>
<dx:LayoutItemNestedControlContainer runat="server" SupportsDisabledAttribute="True">
<dx:ASPxTextBox ID="Textbox_Adi" runat="server" Width="100%" MaxLength="50">
<ClientSideEvents Init="RecalculateCharsRemaining" KeyDown="RecalculateCharsRemaining" KeyUp="RecalculateCharsRemaining" />
</dx:ASPxTextBox>
<span class="chrm" style="font-size: 11px">Kalan Karakter Sayısı:
<dx:ASPxLabel ID="Textbox_Adi_cr" runat="server" EnableClientSideAPI="True" Font-Size="11px" />
</span>
</dx:LayoutItemNestedControlContainer>
</LayoutItemNestedControlCollection>
</dx:LayoutItem>
