Custom Elements

Show Demo List

<!DOCTYPE html>

<html lang="en">

<head>

<title id='Description'>FormattedInput Custom Element KeyboardNavigation</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" />

<meta name="description" content="This is an example of keyboard navigation in Custom Elements FormattedInput." />

Properties

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/site.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/site.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/site.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/site.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/site.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/site.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/site.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/site.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/site.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/site.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/site.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

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/site.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/site.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

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/site.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/site.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/site.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/site.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/site.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/site.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/site.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>

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/site.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/site.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/site.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>

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/site.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/site.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/site.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/site.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/site.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/site.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/site.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/site.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/site.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/site.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

Custom Elements

Properties

Events

Code examples

Code examples

Code examples

Code examples

Methods