Usage (signatures)
board.create('input', [x, y, value, label]);
x and y are the coordinates of the lower left corner of the text box. The position of the text is fixed if
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.
Parameters
| Name | Type | Description |
|---|---|---|
x |
NumberLike | |
y |
NumberLike | |
value |
String | |
label |
String | 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="window.updateGraph()">Update graph</button>']);
window.updateGraph = function() {
graph.Y = board.jc.snippet(input.Value(), true, 'x', false);
graph.updateCurve();
board.update();
}
Add the 'keyup' event to an input field
// An alternative would be the event 'input'
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
// `change` is fired when the input element loses focus
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'
});
Attributes
Own
disabled
- Description
Control the attribute "disabled" of the HTML input field.
- Type
- Boolean
- Default Value
- false
- Source
- options.js, line 6614
maxlength
- Description
Control the attribute "maxlength" of the HTML input field.
- Type
- Number
- Default Value
- 524288 (as in HTML)
- Source
- options.js, line 6626
Inherited
Members
Own
none
Inherited
Methods
Own
Value() → {String}
Returns the value (content) of the input element
Returns
content of the input field.
- Type
- String
Details
- Source
- element/input.js, line 331
set(val) → {JXG.GeometryElement}
Sets value of the input element.
Example
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'});
Parameters
| Name | Type | Description |
|---|---|---|
val |
String |
Returns
Reference to the element.
- Type
- JXG.GeometryElement
Details
- Source
- element/input.js, line 342
Inherited
Events
Own
none