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). If the width of element is set with the attribute "cssStyle", the width of the label must be added because cssStyle affects the surrounding div element.
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.
| Constructor Attributes | Constructor Name and Description |
|---|---|
| Field Attributes | Field Name and Description |
|---|---|
|
Control the attribute "disabled" of the HTML input field.
|
|
|
Control the attribute "maxlength" of the HTML input field.
|
| 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, 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);
}));
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.
Defined in: options.js.
- Default Value:
- false
{Number}
maxlength
Control the attribute "maxlength" of the HTML input field.
Defined in: options.js.
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, 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, 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