Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

jQuery Mobile Textinput clearBtnText Option

  • Last Updated : 04 Jan, 2022

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.

Syntax:

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=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-2.1.3.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js”></script>

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

HTML




<!DOCTYPE html>
<html lang="en">
  <head>
    <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"
          href=
    <script src=
    </script>
    <script src=
    </script>
  
    <script>
      $(document).ready(function () {
        $( "#GFG" ).textinput({
            clearBtn: true,
            clearBtnText: "Clear The Name"
        });
      });
    </script>
  
    <style>
      .ui-input-text{
        width: 400px;
      }
    </style>
  </head>
  <body>
    <div data-role="page">
      <center>
        <h2 style="color: green">GeeksforGeeks</h2>
        <h3>jQuery Mobile TextInput clearBtnText option</h3>
        <br>
  
        <input
          id="GFG"
          type="text"
          name="name"
          autocomplete="off"
          placeholder="Enter Your Name Here."
        />
      </center>
    </div>
  </body>
</html>

Output:

jQuery Mobile Textinput clearBtnText Option

Reference: https://api.jquerymobile.com/textinput/#option-clearBtnText


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!