Type Hindi text in TextBox using CSS and jQuery in ASP.Net MVC

mukesh1
 
on Mar 05, 2018 05:26 AM
Sample_555216.zip
12285 Views

How to add hindi or englist text in textbox.when want to add hindi text can type text in hindi, when want to type in english ,can type in english

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Mar 06, 2018 02:50 AM

Here i have created one example. You need to change the code as per your requirement.

For typing in hindi you need to download the font from the link below.

https://www.ffonts.net/Kruti-Dev-010.font.download

Then copy the font in the project folder to use the font in your code.

HTML

<div>
    <table id="rblLanguage">
        <tr>
            <td>
                <input id="rblLanguage_0" type="radio" name="rblLanguage" value="English" /><label
                    for="rblLanguage_0">English</label>
            </td>
        </tr>
        <tr>
            <td>
                <input id="rblLanguage_1" type="radio" name="rblLanguage" value="Hindi" /><label
                    for="rblLanguage_1">Hindi</label>
            </td>
        </tr>
    </table>
    <textarea name="txtText" id="txtText" rows="5"></textarea>
</div>
<style type="text/css">
    @font-face
    {
        /* Font Name to use*/
        font-family: 'HindiFont';
        /* Font path*/
        src: url('<%= ResolveUrl("~/k010.ttf") %>');
    }
    body
    {
        font-size: 20px;
    }
    .hindiFont
    {
        /* Assign the font*/
        font-family: 'HindiFont';
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=rblLanguage]').on("change", function () {
            var selected = $(this).find('input:checked').val();
            var textBox = $('[id*=txtText]');
            if (selected == "Hindi") {
                $(textBox).attr('class', 'hindiFont');
            }
            else {
                $(textBox).attr('class', '');
            }
        });
    });
</script>

Screenshot

mukesh1
 
on Mar 08, 2018 03:24 AM

 

<style type="text/css">
    @@font-face {
        /* Font Name to use*/
        font-family: 'HindiFont';
        font-size: large;
        src: url("../../k010.TTF")format('truetype');
       
    }

    body {
        font-size: 20px;
    }

    .hindiFont {
        /* Assign the font*/
        font-family: 'HindiFont';
        /*here we need to access @@font-face also*/
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        debugger;

        $('[id*=rblLanguage]').on("change", function () {
            var selected = $(this).find('input:checked').val();
            var textBox = $('[id*=Description]');
            if (selected == "Hindi") {
                $(textBox).attr('class', 'hindiFont');
            }
            else {
                $(textBox).attr('class', '');
            }
        });
    });
</script>
 
 
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
 
    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                Edit News
                <small>@*Preview*@</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Admin</a></li>
                <li class="active">Edit News</li>
            </ol>
        </section>
        <section class="content">
            <div class="box box-default">
                <div class="box-body">
                    <div class="row">
                        <div class="form-horizontal">
                            <h4></h4>
                            <hr />
                            <div>
                                <table id="rblLanguage">
                                    <tr>
                                        <td>
                                            <input id="rblLanguage_0" type="radio" name="rblLanguage" value="English" /><label for="rblLanguage_0">English</label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input id="rblLanguage_1" type="radio" name="rblLanguage" value="Hindi" /><label for="rblLanguage_1">Hindi</label>
                                        </td>
                                    </tr>
                                </table>
 
 
 
                                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                                @Html.HiddenFor(model => model.ID)
                                 
                                    <div class="col-sm-7">
                                        <div class="form-group">
                                            @Html.LabelFor(model => model.Description, htmlAttributes: new { @class = "control-label col-md-3" })
                                            <div class="col-md-9">
                                                @Html.TextAreaFor(m => m.Description, new { @class = "form-control required", @rows = "6" })
                                                @Html.ValidationMessageFor(model => model.Description, "", new { @class = "text-danger" })
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-md-offset-3 col-md-9">
                                            <input type="submit" value="Update" class="btn btn-default" /> &nbsp;&nbsp;&nbsp;
                                            @Html.ActionLink("Cancel", "Index", "", new { @class = "btn btn-default" })
                                        </div>
                                    </div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </section>
                                </div>