Skip to content
Related Articles

Related Articles

jQuery Mobile Textinput clearBtnText Option

Improve Article
Save Article
  • Last Updated : 04 Jan, 2022
Improve Article
Save Article

jQuery Mobile is an HTML-5 based user interface system used to design responsive and accessible websites for mobiles, tabs, and desktops. It is based on jQuery.

In this article, we will use the jQuery Mobile Textinput clearBtnText option to set the text which we will see when hover on the clear button of a Textinput Widget. For this to work the Textinput clearBtn option should be set to true. The clearBtnText option accepts a String.


Initialize Textinput with clearBtnText option:

$( ".selector" ).textinput({
  clearBtnText: "Your Text Here"
  • Get clearBtnText option after initialization:

    var clearBtnText = $( ".selector" )
        .textinput( "option", "clearBtnText" );
  • Set clearBtnText option after initialization:

    $( ".selector" ).textinput( "option", 
        "clearBtnText", "Your Text Here" );

CDN Links:

<link rel=”stylesheet” href=”” />
<script src=””></script>
<script src=””></script>

Example: In the example below, we will set clearBtn option to true and clearBtnText option to “Clear The Name“.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Popup - reposition method</title>
    <link rel="stylesheet"
    <script src=
    <script src=
      $(document).ready(function () {
        $( "#GFG" ).textinput({
            clearBtn: true,
            clearBtnText: "Clear The Name"
        width: 400px;
    <div data-role="page">
        <h2 style="color: green">GeeksforGeeks</h2>
        <h3>jQuery Mobile TextInput clearBtnText option</h3>
          placeholder="Enter Your Name Here."


jQuery Mobile Textinput clearBtnText Option


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!