JQuery Mobile text input does not focus

Question

I am new to JQuery Mobile and Javascript in general, so I am trying to learn it by doing a project. I am using JQuery mobile to design a web app and I require a few text inputs. In the JQuery documentation, there are text input examples that have a blue halo when they are clicked, and when the mouse moves away, the blue halo vanishes as well. I copied the provided code, but my text box does not have the same effect. I then tried inspecting the elements in the documentation and I realized that when the text box was clicked, the text input element gained an attribute called "ui-focus". How is this done?

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <script type="text/javascript" src="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="jquery.mobile-1.4.0/jquery.mobile-1.4.0.min.css" />
    <link rel="stylesheet" href="jquery.mobile-1.4.0/jquery.mobile.structure-1.4.0.min.css" />
</head>

<body style class="ui-mobile-viewport ui-overlay-a">

    <div role="main" class="ui-content">
        <label for="basic">Email:</label>

        <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
            <input type="text" name="name" id="basic" value=""/>
        </div>

        <label for="basic">Password:</label>

        <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
            <input type="text" name="name" id="basic" value=""/>
        </div>
    </div>
</body>

Another note, you don't need the last style sheet structure unless you're using your own themes made by ThemeRoller. — Omar
– Omar, Commented Jan 1, 2014 at 21:33

Omar · Accepted Answer · 2014-01-01 15:43:58Z

1

You have copied rendered HTML code. JQM wraps input with a div to give it a new look. You don't have to add any extra code, only input tag, JQM will take care of the rest.

<input type="text" />

answered Jan 1, 2014 at 15:43

Omar

31.7k9 gold badges73 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JQuery Mobile text input does not focus

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related