CODEWITHSUNDEEP
htmlcssjquery-mobile
darklord
darklord

Reputation: 5167

Why mobile jquery wrap my <input>

I am implementing a input box with the following:

<input id="searcher" type="text" placeholder="Search Friends"
                   style="position:absolute; background-color:white; display:block; -webkit-border-radius: 5px; 
                   -moz-border-radius: 5px; border-radius: 5px;">

I have used mobile jquery in my code:

<link rel="stylesheet" href="./styles/jquery.mobile-1.3.2.css" />
<script type="text/javascript" src="./js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.3.2.js"></script>

However, the result is not what I want. I looked the elements in the browser debugging console. I noticed that the input tag is wrapped up in another div:

<div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
    <input ...>
</div>

I have no idea what is going on here. Why mobile jquery do this? And how to remove this effect? Thank you very much!

Upvotes: 2

Views: 2290

Answers (2)

JJJ
JJJ

Reputation: 33163

That's one of the main features of jQuery Mobile: it turns native input elements into mobile-friendly versions with its own styles. You can turn it off by adding data-role="none" to the element:

<input id="searcher" type="text" data-role="none" placeholder="Search Friends" ... >

Demo: http://jsfiddle.net/LtLCR/

Upvotes: 4

user1756588
user1756588

Reputation: 51

Thanks for the answer! Thought I'd share my Meteor Blaze Component scenario...

Symptom: Pressing the 'enter' key on the EasySearch.Input doesn't trigger a search.

Problem: Jquery Mobile 'Input' element control inadvertently disables EasySearch.Input event handlers.

Solution: As per your answer, disable the Jquery Mobile 'Input' element adornment/behaviour but keep the style.

Implementation: Wrap the input with a Jquery mobile looking wrapper.

<div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
  {{> EasySearch.Input index=transcriptIndex attributes=inputAttributes event="enter"}}
</div>

The corresponding template helper inputAttributes simply adds the `data-role="none" attribute (CoffeeScript!)

Template.transcriptSearch.helpers
  inputAttributes: ->
    {
      placeholder: "Search...",
      'data-role': "none"
    }

Upvotes: 0

Related Questions