Question

我正在实现一个包含以下内容的输入框：

<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;">

我在代码中使用了移动jquery：

<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>

然而，结果不是我想要的。我查看了浏览器调试控制台中的元素。我注意到输入标签包含在另一个div中：

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

我不知道这里发生了什么。为什么手机jquery会这样做？以及如何消除这种影响？非常感谢你！

Answer 1

这是jQuery Mobile的主要功能之一：它将原生输入元素转换为具有自己风格的移动友好版本。您可以通过向元素添加data-role="none"来关闭它：

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

演示：http://jsfiddle.net/LtLCR/

Answer 2

谢谢你的回答！以为我会分享我的Meteor Blaze组件方案......

<强>症状：按EasySearch.Input上的“enter”键不会触发搜索。

<强>问题： Jquery Mobile'Input'元素控件无意中禁用了EasySearch.Input事件处理程序。

<强>解决方案：根据您的回答，禁用Jquery Mobile“输入”元素装饰/行为，但保留样式。

<强>实施用Jquery移动外观包装器包装输入。

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

相应的模板帮助器inputAttributes只是添加了`data-role =“none”属性（CoffeeScript！）

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

为什么移动jquery包装我的<input />

2 个答案: