jQuery Mobile Textinput wrapperClass Option

Last Updated : 20 Jan, 2022

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops.

In this article, we will be using the jQuery Mobile Textinput wrapperClass Option. The value of this option is a string that contains a space-separated list of classes that are going to be applied to the outermost element of the specified Textinput widget.

Syntax:

Initializing the textinput with the wrapperClass option.

$( ".selector" ).textinput({
 wrapperClass: "custom-class"
});

Setting the wrapperClass option.

$( ".selector" ).textinput( "option", 
    "wrapperClass", "custom-class" );

Getting the wrapperClass option.

var wrapperClass = $( ".selector" )
    .textinput( "option", "wrapperClass" );

CDN Link: First, add jQuery Mobile scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css”>
<script src=”//code.jquery.com/jquery-1.10.2.min.js”></script>
<script src=”//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>

Example: This example describes the jQuery Mobile Textinput wrapperClass Option.

HTML

<!doctype html> 
<html lang="en"> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet"
          href= 
"//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
    <script src= 
"//code.jquery.com/jquery-1.10.2.min.js"> 
    </script> 
    <script src= 
"//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <div data-role="page"> 
            <h1 style="color:green;"> 
                GeeksforGeeks 
            </h1> 
            <h3>jQuery Mobile Textinput wrapperClass Option</h3> 
            <div data-role="header"> 
            </div> 
            <div role="main" class="ui-content" 
                     style="width: 50%;"> 
                <label for="GFG">Enter Text:</label> 
                <textarea name="Geeks" id="GFG"></textarea> 
            </div> 
            <input type="button" id="Button" 
                       value="Value of wrapperClass"> 
            <div id="log"></div> 
        </div> 
    </center> 
    <script> 
        $(document).ready(function () { 
            $("#GFG").textinput({ 
                wrapperClass: "custom-class" 
            }); 
            $("#GFG").textinput("option",  
                   "wrapperClass", "custom-class"); 
            
            $("#Button").on('click', function () { 
                var a = $("#GFG").textinput( 
                      "option", "wrapperClass"); 
                $("#log").html(a); 
            }); 
        }); 
    </script> 
</body> 
  
</html>