We Keep Coding

How to format amount on keyup with toLocaleString ? using minimumFractionDigits?

I'm trying figure out a way to format in live an amount of an input box with local's 'it-IT' and minimumFractionDigits of > 2.
This is my code https://jsfiddle.net/oLgtwjfr/
$(document).on('keyup', '#inputKeyupExample', function(event) {
var $this = $( this )
var elementThis = this
var input = $this.val()
$this.val(formatNumber(parseInt(input)))
})
function formatNumber(x) {
return x.toLocaleString("it-IT",
{ minimumFractionDigits: 2 });
}
I except the formatted output of 25000 to be 25.000,00 on keyup. But the actual output is 2,00.

I'm not sure the input box supports that kind of functionality without a lot of extra programming. Also, it would become messy for the user to edit or change the value with lots of numeric formatting in place in that text box.
Instead, consider a formatting display separate to the input like the following:
https://jsfiddle.net/declanmcd/nuy9q5g4/4/
So instead of
$this.val(formatNumber(parseInt(input)));
use
$("#output").text(formatNumber(parseInt(input)));

How to always show the number prefix in html input field?

Is there any smart, minimalistic way to always show the prefix (positive, negative) of a number in a HMTL input field? (e.g. +1, 0, -1)
I have only found s solution for PHP:
How to prefix a positive number with plus sign in PHP
I have to use <input type="text"> since there are different implementations for text=number in different browsers: Localization of input type number
Why am I doing this?
I have an input field that shows the percentage that can be added (or subtracted) to a certain value.
Basevalue: 10
Mofification %: +10
Results: 11

The easiest way would be using some basic javascript. Add a script at the end of your HTML page (before the body closing tag) then give to the input an id, for example prefixedInput. Then you can write your little script
var inputField = document.getElementById("#prefixedInput");
var inputFieldValue = inputField.value;
if (inputFieldValue > 0) {
inputField.value = "+" + inputFieldValue;
}
if (inputFieldValue < 0) {
inputField.value = "-" + inputFieldValue;
}
Now, that works in a way that isn't really useful because this function will be executed just one time when the page will load, so if you have assigned to your input a value, this will be prefixed with its sign. However if you want to bind this behaviour to some actions (e.g. prefixing the value even if the user inserts the value after the intial page load) you will be forced in using event listeners.

Disallow typing after reaching input max length

I have a few inputs on my page that need to have a max length of sorts and this is working to an extent except that an extra number keeps being added because of a plugin we're using...and no I can't get rid of the plugin causing it.
To fix this I need to remove one character from the input field. I have gotten to the point where it will remove it from the value of the input, but it is still showing on the screen...which is the issue.
Is there a way to disallow typing after they hit a certain point using JavaScript? I cannot use max length in the case because the virtual keyboard we are using ignores that completely.
I have something like this
var target = event.currentTarget;
var name = $(target).attr("name");
var validationLength = $(target).attr("validation").length;
$('input[name="'+name+'"]').on('keyup keydown change', function () {
if($(this).val().length > validationLength){
$(this).val().substr(0,$(this).val().length-1);
};
});
And like I said this will remove it from the value of the input, but not what the user actually sees on the screen (the most important part). Any help would much appreciated!

validationLength = 10;
$('#test').on('keyup keydown change', function () {
if($(this).val().length > validationLength){
val=$(this).val().substr(0,$(this).val().length-1);
$(this).val(val);
};
});
http://jsfiddle.net/mctkpLph/

javascript - Creating bidirectional update in text entry areas

This is probably very simple but I seem to be running around in ever decreasing circles...
I'm developing a webpage for our payroll area and...
Q. Is it possible to have two text input fields that update each other automatically and will work in both directions. i.e one will update the other and vica-versa depending on input
What I'm after here...
Employees current salary is entered into a text input
Payroll can then enter data into one of two text inputs (New Salary or Percentage Increase)
Entering a New salary will automatically update Percentage Increase or
Entering a Percentage Increase will automatically update the New Salary field
The whole idea is to allow payroll to use either percentage or actual salary to
come up with the new figure
Thanks
Frankie G

Here's a really basic implementation with no validation that the entered values are numeric:
window.onload = function() {
var currentSal = document.getElementById("current"),
percentInc = document.getElementById("percent"),
newSal = document.getElementById("new");
percentInc.onkeyup = function() {
newSal.value = currentSal.value * (1 + percentInc.value / 100);
};
newSal.onkeyup = function() {
percentInc.value = (newSal.value - currentSal.value) / currentSal.value * 100;
};
};​
This assumes your html markup uses the element ids "current", "percent" and "new", but obviously you can change these. On any keyup within the percentage increase or new salary fields just do the appropriate calculation and update the other field. The whole thing is in an onload event for the page so that document.getElementById() can find the elements - you could, instead, put it in a script block at the end of the page (though having all contained in a function like that keeps the variables out of the global scope).
Demo: http://jsfiddle.net/5pDdM/

You'll have to implement either the onChange method or the onkeyup.
Both are usable, though onChange gets fired when a user leaves the field and the input is changed, and onkeyup, whenever you release a key you pressed (Meaning, if you hold the button it won't fire, only after releasing).
Inside that function you could do something like
function salEntered(sal)
{
document.getElementById("#perc").value = (document.getElementById("#origSal").value / sal )* 100;
}
function percEntered(perc){
var new_sal = document.getElementById("#origSal").value * ( 1+ perc/100);
document.getElementById("newSal").value = new_sal;
}
And bind those to either one of the named events.
I took the perc as a whole decimal notation.
Bind them using :
<input type="text" id="newSal" onChange="salEntered(document.getElementById('newSal').value)" />
Or onkeyup.
Not able to test, will do later on, when I wake up.
When wrong, correct me. Using the var keyword keeps the variable in the correct scope , being the function.

How can I stop isNaN from returning an error for a blank field?

EDIT:
Ok so I'm updating this question, to show what I've built as I've still not been able to fix this issue. Here is an image of what I've got. So as you can see,
When the user enters a value, the calculation (they are just percentage and total calculations are done "onkeyup". As you can see because of this they return "NaN". Is there a way for me to stop the field displaying a NaN and then subsequently only showing the total values?
I have thought about this and I could just get all the fields to calculate as soon as something is input into the final field? What do you think. Apologies to all those that had perviously answered my question, I am still trying to figure out the best approach, I'm just not as good with JavaScript as I am with HTML/CSS!!

You should try writing a checkNumber function that takes the entered value as its argument (rather than referring directly to each field inside the function). Something like this:
var checkNumber = function (testval) {
if ( isNaN(testval) ) {
alert('Bad!');
// clean up field? highlight in red? etc.
} else {
// call your calculation function
}
}
Then bind that function to the keyup event of each form field. There are a number of ways to do this. Look into addEventListener(), or the binding features of a framework like jQuery (.delegate() or .keyup(), e.g.).
Note that if you do bind the function to the event, you won't have to explicitly pass in the value argument. You should be able to work with a field's value within the function via this.value. So you'd have something like this:
var checkNumber = function () {
if ( isNaN( this.value ) ) {
alert('Bad!');
// clean up field? highlight in red? etc.
} else {
// call your calculation function
}
}
And then (with a naive binding approach by ID):
document.getElementById('id_of_a_field').addEventListener('keyup', checkNumber, true);

Can't you just initialize the text box with a default value, say 0?

Why don't you use 3 different functions or an argument to identify which of the inputs the user is pressing? If each of the inputs calls checkNumber(1), checkNumber(2) and checkNumber(3) you can only validate the input that the user is using instead of validating all 3 at the same time.
Alternatively you can use input validation and instead of an alert just return false to prevent the user from inputing invalid chars

How about use short-circuit evaluation with jsFiddle example
EDIT for parseFloat:
function checkNumber()
{
var sInput = parseFloat(document.getElementById('sInput').value || 0);
var dInput = parseFloat(document.getElementById('dInput').value || 0);
var pInput = parseFloat(document.getElementById('pInput').value || 0);
if (isNaN(sInput) || isNaN(dInput) || isNaN(pInput)) {
alert("You entered an invalid character. Please press 'Reset' and enter a number.");
}
}
So if pInput is undefined just use 0, but if the input has value then use that value.
SIDE NOTE: white space is actually a number, +' '; // 0