JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index
Elements
Classes

Element Input

JXG.GeometryElement,JXG.CoordsElement
   ↳ JXG.Text
      ↳ Text
            ↳ Input

This element is used to provide a constructor for special texts containing a HTML form input element. For this element, the attribute "display" has to have the value 'html' (which is the default).

Setting a CSS class: The attribute cssClass affects the HTML div element that contains the input element. To change the CSS properties of the HTML input element a selector of the form .myinput > input { ... } has to be used. See the analog example for buttons: Button.

Access the input element with JavaScript: The underlying HTML button element can be accessed through the sub-object 'rendNodeInput', e.g. to add event listeners.

Defined in: input.js.
Extends Text.

Element Summary
Constructor Attributes Constructor Name and Description
 
Input
Attributes Summary
Field Attributes Field Name and Description
 
disabled
Control the attribute "disabled" of the HTML input field.
 
maxlength
Control the attribute "maxlength" of the HTML input field.
Method Summary
Method Attributes Method Name and Description
 
set(val)
Sets value of the input element.
 
Value()
Returns the value (content) of the input element
Methods borrowed from class JXG.Text:
_createFctUpdateText, _setText, bounds, calculateScore, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, escapeTicks, expandShortMath, generateTerm, getAnchorX, getAnchorY, getNumberOfConflicts, getSize, hasPoint, notifyParents, poorMansTeX, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, unescapeTicks, update, updateRenderer, updateSize, updateText, utf8_decode, valueTagToJessieCode
Methods borrowed from class JXG.GeometryElement:
_set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
Methods borrowed from class JXG.CoordsElement:
_anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveAlongES6, moveTo, moveToES6, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, visitES6, X, XEval, Y, YEval, Z, ZEval
Events borrowed from class JXG.GeometryElement:
attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Element Detail
Input
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "input".

Possible parent array combinations are:
{number|function} x
{number|function} y
{String} value
{String|function} label

Parent elements for input elements.

x and y are the coordinates of the lower left corner of the text box. The position of the text is fixed, x and y are numbers. The position is variable if x or y are functions.

The default value of the input element must be given as string.

The label of the input element may be given as string or function.



Examples:
 // Create an input element at position [1,4].
 var input = board.create('input', [0, 1, 'sin(x)*x', 'f(x)='], {cssStyle: 'width: 100px'});
 var f = board.jc.snippet(input.Value(), true, 'x', false);
 var graph = board.create('functiongraph',[f,
         function() {
           var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[0,0],board);
           return c.usrCoords[1];
         },
         function() {
           var c = new JXG.Coords(JXG.COORDS_BY_SCREEN,[board.canvasWidth,0],board);
           return c.usrCoords[1];
         }
       ]);

 board.create('text', [1, 3, '<button onclick="updateGraph()">Update graph</button>']);

 var updateGraph = function() {
     graph.Y = board.jc.snippet(input.Value(), true, 'x', false);
     graph.updateCurve();
     board.update();
 }


				
				
// Add the `keyup` event to an input field
var A = board.create('point', [3, -2]);
var i = board.create('input', [-4, -4, "1", "x "]);

i.rendNodeInput.addEventListener("keyup", ( function () {
   var x = parseFloat(this.value);
   if (!isNaN(x)) {
	   A.moveTo([x, 3], 100);
   }
}));





				
				
// Add the `change` event to an input field
var A = board.create('point', [3, -2]);
var i = board.create('input', [-4, -4, "1", "x "]);

i.rendNodeInput.addEventListener("change", ( function () {
   var x = parseFloat(i.Value());
   A.moveTo([x, 2], 100);
}));





				
				
// change the width of an input field
 let s = board.create('slider', [[-3, 3], [2, 3], [50, 100, 300]]);
 let inp = board.create('input', [-6, 1, 'Math.sin(x)*x', 'f(x)='],{cssStyle:()=>'width:'+s.Value()+'px'});





				
				
  Apply CSS classes to label and input tag
    <style>
        div.JXGtext_inp {
            font-weight: bold;
        }

        // Label
        div.JXGtext_inp > span > span {
            padding: 3px;
        }

        // Input field
        div.JXGtext_inp > span > input {
            width: 100px;
            border: solid 4px red;
            border-radius: 25px;
        }
    </style>

var inp = board.create('input', [-6, 1, 'x', 'y'], {
     CssClass: 'JXGtext_inp', HighlightCssClass: 'JXGtext_inp'
});



        




				
                

				


			

			


			
				

    				 Attribute Detail
				

				
					 
					


					{Boolean}
					disabled

					

					

						Control the attribute "disabled" of the HTML input field.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						
							

							
Default Value:

							

								false
							

							

						

					

				
					 
					


					{Number}
					maxlength

					

					

						Control the attribute "maxlength" of the HTML input field.
						
							

							Defined in:  options.js.
						
						
					


					

						
						
						
						
							

							
Default Value:

							

								524288 (as in HTML)
							

							

						

					
				
			


			


			
				

					Method Detail
				

				
					 
					


					{JXG.GeometryElement}
					set(val)

					

					

						Sets value of the input element.
						
						
					


						
							

							
Parameters:

							
								

									{String} val
									
								

								

							
							

						
						
						
						
						
							

							
Returns:

							
								
{JXG.GeometryElement} Reference to the element.

							
							

						
						
						

					
					

					
Examples:

					
					
        var i1 = board.create('input', [-3, 4, 'sin(x)', 'f(x)='], {cssStyle: 'width:4em', maxlength: 2});
        var c1 = board.create('checkbox', [-3, 2, 'label 1'], {});
        var b1 = board.create('button', [-3, -1, 'Change texts', function () {
                i1.setText('g(x)');
                i1.set('cos(x)');
                c1.setText('label 2');
                b1.setText('Texts are changed');
            }],
            {cssStyle: 'width:400px'});





					
					

					

					

				
					 
					


					{String}
					Value()

					

					

						Returns the value (content) of the input element
						
						
					


						
						
						
						
						
							

							
Returns:

							
								
{String} content of the input field.

							
							

						
						
						

					

					
				
			


			

			


			
                
                

                    Attributes borrowed from other Elements
                


                

                
Attributes borrowed from class Text: 
anchor, anchorX, anchorY, attractors, cssClass, cssDefaultStyle, cssStyle, digits, display, dragArea, fontSize, fontUnit, formatNumber, highlightCssClass, highlightCssDefaultStyle, highlightCssStyle, intl, isLabel, katexMacros, parse, rotate, snapSizeX, snapSizeY, toFraction, useASCIIMathML, useCaja, useKatex, useMathJax, visible
Attributes borrowed from class JXG.GeometryElement: 
aria, dash, dashScale, draft, dragToTopOfLayer, element3D, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, ignoreForLabelAutoposition, layer, lineCap, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, withLabel

                

                

                


				
				

					Fields borrowed from other Elements
				


				

				
Fields borrowed from class JXG.Text: 
size
Fields borrowed from class JXG.GeometryElement: 
_org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, type, visProp, visPropCalc
Fields borrowed from class JXG.CoordsElement: 
coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects

				

				

				

				
				

					Methods borrowed from other Elements
				

				

				
Methods borrowed from class JXG.Text: 
_createFctUpdateText, _setText, bounds, calculateScore, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, escapeTicks, expandShortMath, generateTerm, getAnchorX, getAnchorY, getNumberOfConflicts, getSize, hasPoint, notifyParents, poorMansTeX, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, unescapeTicks, update, updateRenderer, updateSize, updateText, utf8_decode, valueTagToJessieCode
Methods borrowed from class JXG.GeometryElement: 
_set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
Methods borrowed from class JXG.CoordsElement: 
_anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveAlongES6, moveTo, moveToES6, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, visitES6, X, XEval, Y, YEval, Z, ZEval

				

				

                

                
   				

    				Events borrowed from other Elements
                

                

                
Events borrowed from class JXG.GeometryElement: 
attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up

                

                

            

		

		



		

			
			Documentation generated by JsDoc Toolkit 2.4.0 on Mon Oct 06 2025 17:36:52 GMT+0200 (Mitteleuropäische Sommerzeit)