jQWidgets jqxNumberInput textchanged Event
jQWidgets is a JavaScript framework for making web-based applications for PC and mobile devices. It is a very powerful, optimized, platform-independent, and widely supported framework. The jqxNumberInput represents a jQuery widget that is used to add input currency, percentages, and any type of numeric data. The input data can be presented in various ways. The other capabilities of this widget are to customize the number of digits and decimal digits, currency symbol’s string and position, group and decimal separator character.
The textchanged event is used to trigger when the user entered a text widget.
Syntax:
$('Selector').on('textchanged', function () { });Linked Files: Download jQWidgets from the given link. In the HTML file, locate the script files in the downloaded folder.
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqx-all.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxnumberinput.js”></script>
Example: The below example illustrates the jQWidgets jqxNumberInput textchanged event.
HTML
<!DOCTYPE html><html lang="en"> <head> <link rel="stylesheet" href= "jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="jqwidgets/jqx-all.js"></script></head> <body> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> jQWidgets jqxNumberInput textchanged Event </h3> <div id='jqxNumberInput'></div> </center> <script type="text/javascript"> $(document).ready(function() { $("#jqxNumberInput").jqxNumberInput({ width: '250px', height: '35px', spinButtons: true, value: 500 }); $("#jqxNumberInput").on('textchanged', function() { alert("Content Changing") }); }); </script></body> </html> |
Output:
Please Login to comment...