0

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

lukas_o
  • 3,776
  • 4
  • 34
  • 50
  • 2
    Just curious for why would you need this type of feature? Negative prefix to type in negative numbers - of course, but for positive? (I didn't downvote BTW) – Alon Eitan Oct 05 '18 at 13:23
  • 1
    Thanks, I have added the reason, happy to hear what else to improve. – lukas_o Oct 05 '18 at 13:35
  • Well, I would go with color indicator - Red (for negative, and of course the minus sign) and Green (positive), much easier to implement and most of the users understand this indication intuitively – Alon Eitan Oct 05 '18 at 13:40
  • I was wondering if I couldn't do something similar to using `pattern` for validation - but just to amend the value entered instead. – lukas_o Oct 05 '18 at 13:43
  • Perhaps use the following label: `Mofification %:` and then a select input that allow the user to toggle between `+` and `-` options and input type number. If the selected value is `-` then the value should be calculated as negative, otherwise positive. I think adding the actual prefix to the input itself would be confusing – Alon Eitan Oct 05 '18 at 13:49

1 Answers1

1

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.

Alpe89
  • 299
  • 2
  • 11
  • 1
    Thanks for the answer, I am using Vue.js, so I could make a nice binding and prefix modify the value on input (similar to your answer), but I was wondering if there is a minimalistic trick that I couldn't think of. – lukas_o Oct 05 '18 at 14:11
  • Oh, if you're using vuejs you can use filters https://vuejs.org/v2/guide/filters.html – Alpe89 Oct 05 '18 at 15:10
  • Yes, I know but they are a pain for two way bindings in Vue2 :( – lukas_o Oct 10 '18 at 09:45
  • Can you post your Vue component code? Are you using single file components? – Alpe89 Oct 10 '18 at 10:49