Clear Text Field in JQuery Mobile

jquery jquery-mobile reset

12,625

Solution 1

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>

Solution 2

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!

Solution 3

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>

Solution 4

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

View more solutions

12,625

Author by

Jay Mayu

I'm iOS / React Native Developer but I also do some Android, HTML5, Laravel and NodeJS. You can follow me at Twitter @mayooresan or connect with me at LinkedIn If you like my answers and posts then probably you will like my blog Mayu's IT Diary

Updated on June 13, 2022

Comments

Jay Mayu about 2 years

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>