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

    <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

jQuery Mobile Textinput Widget enhanced Option

vpsop

Improve

Article Tags :

jQuery Mobile Textinput clearBtnText Option

Similar Reads

Thank You!

What kind of Experience do you want to share?