How i make mouse auto focus in textbox inside model i want the textbox inside model to be auto focus for mouse lthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery191jqueryminjs34gtltscriptgt ltscript type34textjavascript34 src34httpmaxcdnbootstrapcdncombootstrap332jsbootstrapminjs

Hi micahI have created sample code which fullfill your requirement So please refer the below code HTMLlthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpajaxgoogleapiscomajaxlibsjquery191jqueryminjs34gtltscriptgt ltscript type34textjavascript34 src34httpmaxcdnbootstrapcdncombootstrap332jsbootstrapminjs34gtltscriptgt ltlink rel34stylesheet34 href34httpmaxcdnbootstrapcdncombootstrap332cssbootstrapmincss34 gt ltscript type34textjavascript34gt function ClickTextbox 39myModal39modal39show39 39myModal39on39shownbsmodal39 function 39txtUserName39focus ltscriptgtltheadgtltbodygt ltform id34form

Auto focus to TextBox inside modal using jQuery in ASP.Net

micah

SOLVED CLOSED ACTIVE ANSWERED
User: micah
Posted: on Aug 03, 2017 08:08 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 3971

How i make mouse auto focus in textbox inside model, i want the textbox inside model to be auto focus for mouse

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        function ClickTextbox() {
            $('#myModal').modal('show');
        }   
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <br />
        <input type="text" onclick="ClickTextbox()" class="form-control" style="width: 300px"
            name="name" value=" " />
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">
                            Modal title</h4>
                    </div>
                    <div class="modal-body">
//auto focus
                         <input type="textusername" class="form-control" style="width: 300px"
            name="name" value=" " />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Close</button>
                        <button type="button" class="btn btn-primary">
                            Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Download FREE API for Word, Excel and PDF in ASP.Net

Indresh

0 1

Reply
ANSWER
User: Indresh
Replied: on Aug 03, 2017 08:51 AM
Report

Hi micah,

I have created sample code which full-fill your requirement. So please refer the below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript">
        function ClickTextbox() {
            $('#myModal').modal('show');
            $('#myModal').on('shown.bs.modal', function () {
                $('#txtUserName').focus();
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <br />
        <input type="text" onclick="ClickTextbox()" class="form-control" style="width: 300px"
            name="name" value=" " />
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">
                            Modal title</h4>
                    </div>
                    <div class="modal-body">
                        <input type="textusername" id="txtUserName" class="form-control" style="width: 300px"
                            name="name" value="" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Close</button>
                        <button type="button" class="btn btn-primary">
                            Save changes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Auto focus to TextBox inside modal using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us