|
allowNull
|
boolean
|
true
|
Sets or gets the allowNull property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { allowNull:true, theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
decimal
|
number
|
0
|
Sets or gets the decimal property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { decimal:2, theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
disabled
|
boolean
|
false
|
Sets or gets the disabled property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { disabled:true, theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
decimalDigits
|
number
|
2
|
Sets or gets the decimalDigits property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { decimalDigits:3, theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
decimalSeparator
|
string
|
'.'
|
Sets or gets the decimalSeparator property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { decimalSeparator: "','", theme:"light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
digits
|
number
|
8
|
Sets or gets the digits property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { digits:8, theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
groupSeparator
|
string
|
','
|
Sets or gets the groupSeparator property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { groupSeparator: "'.'", theme:"light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
groupSize
|
number
|
3
|
Sets or gets the groupSize property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { groupSize:2, theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
height
|
number
|
null
|
Sets or gets the height property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
inputMode
|
string
|
'advanced'
|
Sets or gets the inputMode property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { inputMode: "simple", theme:"light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
min
|
number
|
-99999999
|
Sets or gets the min property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { min:2, theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
max
|
number
|
99999999
|
Sets or gets the max property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { max:50, theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
negativeSymbol
|
string
|
'-'
|
Sets or gets the negativeSymbol property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { negativeSymbol: "'-'", theme:"light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
placeHolder
|
string
|
""
|
Sets or gets the placeHolder property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { placeHolder: "Null Value", theme:"light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
promptChar
|
string
|
-
|
Sets or gets the promptChar property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { promptChar: "'#'", theme:"light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
rtl
|
boolean
|
false
|
Sets or gets the rtl property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { rtl:true, theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
readOnly
|
boolean
|
false
|
Sets or gets the readOnly property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { readOnly:true, theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
spinMode
|
string
|
'advanced'
|
Sets or gets the spinMode property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { spinMode: "advanced", theme:"light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
spinButtons
|
boolean
|
false
|
Sets or gets the spinButtons property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { spinButtons:true, theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
spinButtonsWidth
|
number
|
18
|
Sets or gets the spinButtonsWidth property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { spinButtons:true,spinButtonsWidth:30, theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
spinButtonsStep
|
number
|
1
|
Sets or gets the spinButtonsStep property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { spinButtons:true,spinButtonsStep:10, theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
symbol
|
string
|
''
|
Sets or gets the symbol property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { symbol: "'$'", theme:"light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
symbolPosition
|
string
|
'left'
|
Sets or gets the symbolPosition property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { symbol: "$", symbolPosition:"right", theme:"light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
textAlign
|
string
|
'right'
|
Sets or gets the textAlign property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { textAlign: "right", theme:"light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
template
|
string
|
'default'
|
Sets or gets the template property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { template: "success", theme:"light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
theme
|
string
|
''
|
Sets or gets the theme property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
value
|
number
|
null
|
Sets or gets the value property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { value:100, theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
width
|
number
|
null
|
Sets or gets the width property.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { theme: "light" } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
|
|
change
|
Event
|
|
Code examples
Bind to the change event of jqxNumberInput.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { } window.onload = function() { document.querySelector( "jqx-number-input").addEventListener("change", function(event) { // Your code here. }); }; </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
textchanged
|
Event
|
|
Code examples
Bind to the textchanged event of jqxNumberInput.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { } window.onload = function() { document.querySelector( "jqx-number-input").addEventListener("textchanged", function(event) { // Your code here. }); }; </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
valueChanged
|
Event
|
|
Code examples
Bind to the valueChanged event of jqxNumberInput.
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { } window.onload = function() { document.querySelector( "jqx-number-input").addEventListener("valueChanged", function(event) { // Your code here. }); }; </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
|
|
clear
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { } window.onload = function() { document.querySelector( "jqx-number-input").clear(); } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
destroy
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { } window.onload = function() { document.querySelector( "jqx-number-input").destroy(); } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
focus
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { } window.onload = function() { document.querySelector( "jqx-number-input").focus(); } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
getDecimal
|
Method
|
|
| Parameter |
Type |
Description |
| None |
|
|
Return Value
Number
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { } window.onload = function() { var result = document.querySelector( "jqx-number-input").getDecimal(); } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
setDecimal
|
Method
|
|
| Parameter |
Type |
Description |
| index |
number |
|
Return Value
void
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { } window.onload = function() { document.querySelector( "jqx-number-input").setDecimal(1); } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
|
val
|
Method
|
|
| Parameter |
Type |
Description |
| value |
string |
|
Return Value
Number
<!DOCTYPE html><html lang="en"><head> <title id='Description'>Number Input 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/jqxnumberinput.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script> JQXElements.settings[ "inputSettings"] = { } window.onload = function() { document.querySelector( "jqx-number-input").val(12); } </script></head><body> <jqx-number-input settings="inputSettings"></jqx-number-input>
|
