Is it possible to create a textbox in which the user can only write a float with only two decimal number (e.g 1.85)?

Question

Ideally, the user would enter 3 digits and the last two digits would be decimals.

Answer 1

That's more or less basic HTML/JavaScript code, with the exception of the clamp() function which is a (trivial) SugarCube addition to Number.prototype. If you want literally just the "A.BC" format, it's best to use a text input field with a validity pattern and some validation:

<input id="myValText" type="text" pattern="\d\.\d\d"
    onchange="if(!this.checkValidity()) {
        this.value = (Math.round((Number(this.value) || 0) * 100).clamp(0, 999) / 100).toFixed(2);
    }"/>

You can then poll the (text!) value with document.getElementById("myValText").value - if you prefer it to be numeric, use Number(document.getElementById("myValText").value).

An alternative is to use a numbered text input, but it still would allow "invalid" text input, so the way to fix it is roughly the same. On the upside, you now have different (potentially more optimised) input methods, especially on mobile devices.

<input id="myValNumber" type="number" step="0.01" min="0" max="9.99"
	onchange="if(!this.checkValidity()) {
		this.value = Math.round((Number(this.value) || 0) * 100).clamp(0, 999) / 100;
	}"/>

You get to the number the same way, for example via document.getElementById("myValNumber").value or Number(document.getElementById("myValNumber").value), depending on if you want to have a string or number in the end.

If you want to have the current values of some variables (in the following examples $muh and $meh) to be automatically filled in and updated (though the updates won't "stick" until a passage change, as usual with SugarCube), the following example shows both at once.

<input id="myValText" type="text" pattern="\d\.\d\d"
    onchange="if(!this.checkValidity()) {
        this.value = (Math.round((Number(this.value) || 0) * 100).clamp(0, 999) / 100).toFixed(2);
    }
	SugarCube.State.setVar('$muh', Number(this.value));"/>
<input id="myValNumber" type="number" step="0.01" min="0" max="9.99"
	onchange="if(!this.checkValidity()) {
		this.value = Math.round((Number(this.value) || 0) * 100).clamp(0, 999) / 100;
	}
	SugarCube.State.setVar('$meh', Number(this.value));"/>
<<script>>
jQuery(function() {
	document.getElementById("myValText").value = (Number(variables().muh) || 0).toFixed(2);
	document.getElementById("myValNumber").value = Number(variables().meh) || 0;
});
<</script>>

 

Comments

Unfortunately your suggestions did not work out.

I need to store the number entered by the user into a variable.

In addition, in the textbox should appear the number 0.00, and as the user types the value, the zeros are being replaced by the numbers entered by the user, and always the last two numbers will be after the dot (.), as decimal numbers.

The variable must store the number entered by the user, which is their height (e.g. 1.85 m).

Then I will use the same code for the user to enter their weight. And finally, I will use the two variables ($height and $weight) to calculate the body mass index - BMI and save the result in a new variable ($bmi).

The three variables ($height, $weight and $bmi) must be float with two decimal numbers.

---

My example does all you want besides that "replace the 0.00 as the user types" - and that one is under-specified. Since you're breaking with the default assumption on how numeric or text input works in HTML, you need to specify exactly what happens when the user uses any of the typical keyboard-based key combinations, and ideally the specification needs to match the typical usage of them as closely as possible:

* Navigating into and out of the text input via tab and shift+tab (position of the cursor and text marking when you do that)?

* Marking the whole text via Ctrl+A

* Removing numbers via the Delete, Backspace and Ctrl+X keys

* Copying and pasting text via Ctrl+C, Ctrl+V

* Moving the cursor via the left/right arrow keys

* Marking (parts of) the input via the Shift+Arrow Key combination

* Switching text input mode via the Insert key

EDIT: Also, do I understand you correctly? You want to use the same (not similar, literally the same) code to enter the weight, limiting it to between 0 and less than 10 kg, in steps of 10 g? The characters are supposed to be up to some six times the height of an average human while weighting about the same as a common house cat?