Open In App

jQuery Mobile Textinput clearBtnText Option

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 04 Jan, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads