Question

是否有任何Jquery移动的插件可以清除文本框？我想要something like this

当我实现上面的演示时，交叉按钮出现在Jquery Mobile的文本框中。

someomne可以帮助我。谢谢你的时间。

我的代码截至目前

<!DOCTYPE html> 
<html> 

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 

    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <script type="text/javascript" src="jquery.clearable.js"></script>
    <link rel="stylesheet" href="jquery.clearable.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />


</head> 

<body> 

<div data-role="page">

    <div data-role="header">
        <h1>Textbox Clear Demo</h1>
    </div><!-- /header -->
    <div id="content">
    <input type="text" id="clearMe"></input>

    <input type="text" id="clearYou"></input>
    </div>


    <div data-role="footer">
        <small>&#169; 2011 EyePax IT Consulting</small>
    </div><!-- /footer -->



</div><!-- /page -->
<SCRIPT>
$(document).ready(function() {
    $('#clearMe').clearable()
});
</SCRIPT>
</body>
</html>

Answer 1

老问题，但今天有人问过我。

从JQuery Mobile 1.3.0开始，您只需添加：

data-clear-btn="true"

到您的输入控件（textarea除外），将呈现一个清除按钮。

查看新文档： http://jquerymobile.com/demos/1.3.0-beta.1/docs/forms/textinputs/#

希望它可以帮助任何新的搜索者！

Answer 2

您的演示有一个教程，其中包含您需要的所有代码：

http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

只需添加js file，将类添加到所有输入中：

<input type="text" id="clearMe" class="clearable" />

并运行它：

<SCRIPT>
$(document).ready(function() {
    $('.clearable').clearable()
});
</SCRIPT>

Answer 3

您考虑过$("#textboxid").val('');吗？

编辑：回答第1条评论

正如您在示例中所看到的，您尝试粘贴的字段实际上是一个包含2个元素的DIV容器：输入文本字段和带有触发clear事件的链接的图像。

代码在这里：

<div id="sq" class="clearable style1 divclearable">
<input type="text" class="clearable style1" size="30">
<a class="clearlink" href="javascript:" title="Click to clear this textbox"></a>
</div>

Answer 4

这是我创建的解决方案，请在github上查看您可以使用的页面上的示例。

Answer 5

这是一个DEMO，因为你没有发布我能提出的最好的代码

<强>更新

根据您的代码DEMO，请注意我已将</input>代码删除为无效的HTML。

JQuery Mobile中的明文字段

5 个答案: