Apply thousand separator with watermark to TextBox using jQuery in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

hi

Refer below thread I use thousand separators:

Apply Thousand separator to multiple TextBoxes using jQuery Cleave Plugin in ASP.Net

Now problem is that I used watermark for textboxes and when watermark text is more than 2 characters thousand separator doesn't work correctly

please refer to below video:

https://gofile.io/d/PrD9nG

<script type="text/javascript">
    $(function () {
        ApplyWaterMark();
    });

    function ApplyWaterMark() {
        var options = {
            blocks: [3, 3, 3, 3],
            delimiter: ','
        }
        if ($('#TxtPrice2').length > 0) {
            new Cleave($('#TxtPrice2'), options);
        }
        if ($('#TxtPrice1').length > 0) {
            new Cleave($('#TxtPrice1'), options);
        }

        if ($('#TxtPrice1').val() == "0") {
            $('#TxtPrice1').val('NUMBER');
        }

        if ($('#TxtPrice1').val() != 'NUMBER') {
            $('#TxtPrice1').val($('#TxtPrice1').val());
        }
        if ($('#TxtPrice2').val() == "0") {
            $('#TxtPrice2').val('EN');
        }                                      
        if ($('#TxtPrice2').val() != 'EN') {
            $('#TxtPrice2').val($('#TxtPrice2').val());
        }
    }
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                ApplyWaterMark();
            }
        });
    };
</script>
<script type="text/javascript">
    window.onload = function SetColorOnPageLoad() {
        var defalutAzText = "از";
        var defalutTaText = "تا";
        var defalutsearch = "جستجو بر اساس کد ملک";
        functionSetColor(document.getElementById("Txtsearch"), defalutsearch);

        ApplyCss();
    }

    function functionSetColor(Textbox, WaterMark) {

        if (Textbox.value.length > 0 && Textbox.value == WaterMark) {
            Textbox.style.color = "#443f13";
            Textbox.style.fontSize = "14.5px";


        }
        else {
            Textbox.style.color = "white";
            Textbox.style.fontSize = "14.5px";
        }
    }

    function WaterMark(txt, evt, msg) {
        if (txt.value.length == 0 && evt.type == "blur") {
            txt.style.color = "#443f13";
            txt.value = msg;
            txt.style.fontSize = "14.5px";
            txt.style.fontfamily = "behtop_Yekan";
        }
        if (txt.name == "TxtsearchM") {
            txt.style.color = "#808080";

        }

        if (txt.value == msg && evt.type == "focus") {
            txt.style.color = "white";
            txt.value = "";


            if (txt.name == "TxtPrice1" || txt.name == "TxtPrice2") {

                txt.style.fontSize = "16px";
            }
            else {
                txt.style.fontSize = "14.5px";
            }
            txt.style.fontfamily = "behtop_Yekan";
        }
    }
    function ApplyCss() {
        $('select').selectric({
            maxHeight: 200
        });
    };

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                ApplyCss();
            }
        });
    };
</script>
<asp:TextBox ID="TxtPrice2" runat="server" CssClass="txtvadi2" ForeColor="#443f13" onblur="WaterMark(this, event,'EN');" onfocus="WaterMark(this, event,'EN');" Text="EN" onpaste="return false;"></asp:TextBox>
<asp:TextBox ID="TxtPrice1" runat="server" CssClass="txtvadi1" ForeColor="#443f13" onblur="WaterMark(this, event,'NUMBER');" onfocus="WaterMark(this, event,'NUMBER');" Text="NUMBER" onpaste="return false;"></asp:TextBox>

best regards

Neda

Posted one month ago

Remove textbox text property and set the placeholder property. Else it will not work as expected.

The CleaveJS applied to the TextBox value.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://nosir.github.io/cleave.js/dist/cleave.min.js"></script>
<link href="Selecrtic.css" rel="stylesheet" />
<script src="jquery.selectric.min.js"></script>
<asp:ScriptManager runat="server" />
<div id="DDtra">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:DropDownList ID="Ddltran" runat="server" CssClass="ddtranM" AutoPostBack="true"
                OnSelectedIndexChanged="ddlTran_OSIC">
                <asp:ListItem Text="Select" Value=""></asp:ListItem>
                <asp:ListItem Text="Sell" Value="Sell"></asp:ListItem>
                <asp:ListItem Text="Buy" Value="Buy"></asp:ListItem>
                <asp:ListItem Text="Rent" Value="Rent"></asp:ListItem>
            </asp:DropDownList>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>
<asp:UpdatePanel ID="UpP1" runat="server">
    <ContentTemplate>
        <div id="price1" runat="server" visible="false">
            <asp:TextBox ID="TxtPrice1" runat="server" CssClass="txtvadi2" ForeColor="#443f13" onblur="WaterMark(this, event,'EN');" onfocus="WaterMark(this, event,'EN');" placeholder="EN" onpaste="return false;"></asp:TextBox>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
        <div id="price2" runat="server">
            <asp:TextBox ID="TxtPrice2" runat="server" CssClass="txtvadi1" ForeColor="#443f13" onblur="WaterMark(this, event,'NUMBER');" onfocus="WaterMark(this, event,'NUMBER');" placeholder="NUMBER" onpaste="return false;"></asp:TextBox>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
    $(function () {
        ApplyWaterMark();
        SetColorOnPageLoad();
    });

    function ApplyWaterMark() {
        var options = {
            blocks: [3, 3, 3, 3],
            delimiter: ','
        }
        if ($('#TxtPrice2').length > 0) {
            new Cleave($('#TxtPrice2'), options);
        }
        if ($('#TxtPrice1').length > 0) {
            new Cleave($('#TxtPrice1'), options);
        }
        if ($('#TxtPrice1').val() == "0") {
            $('#TxtPrice1').val('از');
        }
        if ($('#TxtPrice2').val() == "0") {
            $('#TxtPrice2').val('تا');
        }
        if ($('#TxtPrice1').val() != 'از') {
            $('#TxtPrice1').val($('#TxtPrice1').val());
        }
        if ($('#TxtPrice2').val() != 'تا') {
            $('#TxtPrice2').val($('#TxtPrice2').val());
        }
    }

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    if (prm != null) {
        prm.add_endRequest(function (sender, e) {
            if (sender._postBackSettings.panelsToUpdate != null) {
                ApplyWaterMark();
                ApplyCss();
                SetColorOnPageLoad();
            }
        });
    };

    function SetColorOnPageLoad() {
        var defalutAzText = "از";
        var defalutTaText = "تا";
        var defalutsearch = "جستجو بر اساس کد ملک";
        //functionSetColor(document.getElementById("Txtsearch"), defalutsearch);

        ApplyCss();
    }
    function functionSetColor(Textbox, WaterMark) {

        if (Textbox.value.length > 0 && Textbox.value == WaterMark) {
            //Textbox.style.color = "#443f13";
            Textbox.style.fontSize = "14.5px";
        }
        else {
            //Textbox.style.color = "white";
            Textbox.style.fontSize = "14.5px";
        }
    }
    function WaterMark(txt, evt, msg) {

        if (txt.value.length == 0 && evt.type == "blur") {
            //txt.style.color = "#443f13";
            txt.placeholder = msg;
            txt.style.fontSize = "14.5px";
            txt.style.fontfamily = "behtop_Yekan";
        }
        if (txt.name == "TxtsearchM") {
            //txt.style.color = "#808080";

        }

        if (txt.value == msg && evt.type == "focus") {
            //txt.style.color = "white";
            txt.value = "";


            if (txt.name == "TxtPrice1" || txt.name == "TxtPrice2") {

                txt.style.fontSize = "16px";
            }
            else {
                txt.style.fontSize = "14.5px";
            }
            txt.style.fontfamily = "behtop_Yekan";
        }
    }
    function ApplyCss() {
        $('select').selectric({
            maxHeight: 200
        });
    }
</script>