CODEWITHSUNDEEP
jqueryjquery-mobilereset
Jaya Mayu
Jaya Mayu

Reputation: 17247

Clear Text Field in JQuery Mobile

Is there any pluin for Jquery mobile that allows to clear the text box?? I want something like this

When I implement the above demo, cross button comes out of the text box in Jquery Mobile.

Can someomne help me out. Thanks for your time.

my code as of now

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

Upvotes: 2

Views: 12833

Answers (5)

JimXC
JimXC

Reputation: 275

Old question, but someone asked me about this today.

As of JQuery Mobile 1.3.0 you can just add:

data-clear-btn="true"

to your input control (except textarea) and a clear button will be rendered.

See new docs: http://jquerymobile.com/demos/1.3.0-beta.1/docs/forms/textinputs/#

Hope it helps any new searchers!

Upvotes: 14

Ehsan Mahpour
Ehsan Mahpour

Reputation: 131

Here's a solution I created, check it out on github there're samples on the page you can use.

Upvotes: 1

PiTheNumber
PiTheNumber

Reputation: 23542

There is a tutorial for your demo with all the code you need:

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

Just include the js file, add the class to all inputs:

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

and run it:

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

Upvotes: 2

Rafay
Rafay

Reputation: 31033

here is a DEMO because you have not posted the code its the best i can come up with

UPDATE

here is the DEMO according to your code, note that i have removed the </input> tags as its not valid HTML.

Upvotes: 0

Mike
Mike

Reputation: 3024

Have you considered $("#textboxid").val(''); ?

Edit: answer to 1'st comment

As you can see in your example the field in which you try to paste actually is a DIV container that contains 2 elements: the input text field and a image with a link that triggers the clear event.

Code here:

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

Upvotes: 1

Related Questions