在 JQuery Mobile 中清除文本字段答案

【问题标题】：Clear Text Field in JQuery Mobile在 JQuery Mobile 中清除文本字段
【发布时间】：2012-02-01 08:23:15
【问题描述】：

是否有任何用于清除文本框的 Jquery mobile 插件？我要something like this

当我实现上述演示时，Jquery Mobile 中的文本框中出现了十字按钮。

谁能帮帮我。谢谢你的时间。

我现在的代码

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

【问题讨论】：

如何编写代码？给我们一段带有明确声明的代码。

标签： jquery jquery-mobile reset

【解决方案1】：

老问题，但今天有人问我这个问题。

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

data-clear-btn="true"

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

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

编辑：回答第一条评论

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

代码在这里：

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

【讨论】：

我需要的文本框内的交叉框。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

更新

这里是 DEMO 根据您的代码，请注意我已删除 </input> 标记，因为它的 HTML 无效。

【讨论】：