Custom Elements Documentation

disabled boolean false

Sets or gets the disabled property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			disabled:true, theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

decimalNotation string "default"

Sets or gets the decimalNotation property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			decimalNotation:"exponential", theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

dropDown boolean false

Sets or gets the dropDown property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			dropDown:true, theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

dropDownWidth number null

Sets or gets the dropDownWidth property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			dropDownWidth:200, theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

height number null

Sets or gets the height property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

min string '-9223372036854775808'

Sets or gets the min property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			min:0, theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

max string '9223372036854775807'

Sets or gets the max property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			max:111110100, theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

placeHolder string ''

Sets or gets the placeHolder property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			placeHolder:"Enter a number", theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

popupZIndex number 20000

Sets or gets the popupZIndex property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			popupZIndex:99999, theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

roundedCorners boolean true

Sets or gets the roundedCorners property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			roundedCorners:true, theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

rtl boolean false

Sets or gets the rtl property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			rtl:true, theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

radix number | string 10

Sets or gets the radix property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			radix:"'hexadecimal'", theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

spinButtons boolean true

Sets or gets the spinButtons property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			spinButtons:true, theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

spinButtonsStep number 1

Sets or gets the spinButtonsStep property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			spinButtons:true,spinButtonsStep:3, theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

template string 'default'

Sets or gets the template property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			template:"primary", theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

theme string ''

Sets or gets the theme property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

upperCase boolean false

Sets or gets the upperCase property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			upperCase:true, theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

value string '0'

Sets or gets the value property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			value:0, theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

width number null

Sets or gets the width property.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			theme:"light"       }         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

change Event

Code examples

Bind to the change event of jqxFormattedInput.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			       }	window.onload = function() {		document.querySelector("jqx-formatted-input").addEventListener("change", function(event) {			// Your code here.		});	};         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

close Event

Code examples

Bind to the close event of jqxFormattedInput.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			       }	window.onload = function() {		document.querySelector("jqx-formatted-input").addEventListener("close", function(event) {			// Your code here.		});	};         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

open Event

Code examples

Bind to the open event of jqxFormattedInput.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			       }	window.onload = function() {		document.querySelector("jqx-formatted-input").addEventListener("open", function(event) {			// Your code here.		});	};         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

radixChange Event

Code examples

Bind to the radixChange event of jqxFormattedInput.

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			       }	window.onload = function() {		document.querySelector("jqx-formatted-input").addEventListener("radixChange", function(event) {			// Your code here.		});	};         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

close Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			       }	window.onload = function() {		document.querySelector("jqx-formatted-input").close();								}         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

destroy Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			       }	window.onload = function() {		document.querySelector("jqx-formatted-input").destroy();								}         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

focus Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			       }	window.onload = function() {		document.querySelector("jqx-formatted-input").focus();								}         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

open Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			       }	window.onload = function() {		document.querySelector("jqx-formatted-input").open();								}         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

render Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			       }	window.onload = function() {		document.querySelector("jqx-formatted-input").render();								}         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

refresh Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			       }	window.onload = function() {		document.querySelector("jqx-formatted-input").refresh();								}         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

selectAll Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			       }	window.onload = function() {		document.querySelector("jqx-formatted-input").selectAll();								}         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

selectFirst Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			       }	window.onload = function() {		document.querySelector("jqx-formatted-input").selectFirst();								}         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

selectLast Method

Parameter	Type	Description
None

Return Value
void

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			       }	window.onload = function() {		document.querySelector("jqx-formatted-input").selectLast();								}         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

val Method

Parameter	Type	Description
value	string/number	(if 'binary', 'octal', 'decimal' or 'hexadecimal' is passed) or decimal notation (if 'exponential', 'scientific' or 'engineering' is passed). If no parameter is passed, returns the displayed value of the jqxFormattedInput

Return Value
String

<!DOCTYPE html><html lang="en"><head>    <title id='Description'>FormattedInput Custom Element Settings</title>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />    <link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />    <link rel="stylesheet" href="../styles/demos.css" type="text/css" />    <script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>    <script type="text/javascript" src="../jqwidgets/jqxformattedinput.js"></script>    <script>       JQXElements.settings["formattedInputSettings"] =       {			       }	window.onload = function() {		var result = document.querySelector("jqx-formatted-input").val();								}         </script></head><body>   <jqx-formatted-input settings="formattedInputSettings"></jqx-formatted-input></body></html>

Custom Elements Documentation

Properties

Events

Code examples

Code examples

Code examples

Code examples

Methods