Handling decimal input while typing

[StefanHoutzager]

I wrote some js to handle decimal input while typing. I have not found a library that did this decently. If anyone is interested I would appreciate feedback (preferably on the github page).

GitHub - StefanHoutzager/decimal-input.js: Format decimal content while...

      This is a test / demo html file with javascript to handle a 
      configurable input field for decimals. It works in
      at least the newest versions of Chrome, Firefox and Edge
      Configurable with HTML attributes in the decimal input field are:
      - numDecimals
      - maxDigits
      - decimalSeparator
      - thousandsSeparator
      - allowNegativeSign 
  
      Design choices:
      - The selectionStart is taken as the cursor position in the following 
        requirements
      - Formatting only takes place on keydown and paste for an 
        optimal user experience
      - For maximum configurability the text input is used instead of 
        number input
      - Configuration errors are indicated by coloring the inputfield red 
        and assign it a tooltip with an errormessage
      - Fields for decimal input are marked with class='decimal'
      - maxDigits is a mandatory attribute for decimal input fields, 
        the value should be > 0
      - If numDecimals > 0 maxDigits should be greater than numDecimals
      - If numDecimals > 0 the initial value shows numDecimals zero's right 
        of the separator, one zero left of it
      - With all keydown and paste actions with the selectionstart position
        in the integer part thousands separators have to appear in the right positions
      - If no constraint is met the input is rejected (not printed)
      - If input is rejected on paste a validation message appears for three seconds
	  
      Requirements:

      - Behaviour on delete keydown
        With nothing selected
        - If the cursor is in the decimalpart change the value of the digit in zero and 
          move the cursor one position to the right
        - If the cursor is in the integer part and left of the decimalSeparator or a 
          thousandsSeparator move the cursor one position to the right
        - If the cursor is in the integer part, left of the only digit in the integer part 
          change the value to zero and don't move the cursor
        - If the cursor is in the integer part, left of a digit which is not the only one 
           in the integer part remove the digit and don't move the cursor
        With a selection
        - If the whole value is selected change the value to the default, 
          the cursor should be left of the value
        - If the whole integerpart is selected replace it with a zero, 
           put the cursor left of it
        - If a part of the integer- and decimalparts are selected replace 
          the selected integer part with empty space and the selected 
         decimals with zero's, don't move the cursor

      - Behaviour on backspace keydown
        With nothing selected  
        - If the cursor is in the decimal part and directly right of the
          decimalSeparator move the cursor one position to the left
        - If the cursor is in the integer part and right of a 
          thousandsSeparator move the cursor one position to the left
        - If the cursor is in the integer part, on a position > 0 while there 
          are > 1 digits in the integer part remove the digit and
          let the cursor at the same position
        - If the cursor is in the integer part, left of the decimalseparator / 
          at the end of the integerpart of the number while there is 
          1 digit in the integer replace the digit with 
          zero and move the cursor one position to the left
        - If after removal of a digit the integer part starts with more 
          than one zero remove all zero's of the integer part except one, 
          update the thousands-separators
        With a selection
        - Replace selected digits in the decimal part with zero
        - If the whole integerpart of the number is selected replace that 
          part with zero and move the cursor to position zero
        - If a part of the integerpart is selected starting at position zero
          remove the selection and put the cursor to position zero
        - If a part of the integerpart is selected starting at a
          position that is not zero remove the selection. 
          Put the cursor at the starting position of the removed part
	
      - Behaviour on decimalSeparator keydown
        - If the cursor is in the integer part move the cursor to the 
          right of the decimalSeparator
	
      - Behaviour on digit keydown
        With nothing selected 
        - If the cursor is in the decimalpart replace the digit right of the 
          cursor and put the cursor one position to the right
        - If the cursor is in the integer part on a position immediately
          left of the first digit and the integerpart value is zero (or -0) 
          replace the zero and put the cursor one position to the right
        - If the cursor is in the integer part on a position immediately 
          right of the first digit and the integerpart value is zero (or -0) 
          replace the zero, cursor position not altered
        - If the cursor is in the integer part, on a position not left of 
          the first digit, print the keyvalue, let the cursorposition the same
        - If the cursor is in the integer part on position zero and the
          keyvalue is zero no action follows 
          (digit is not printed, cursor position not altered)
        With a selection
        - If the cursor is in the decimalpart replace the first selected 
          with the typed digit, 
          put the cursor right of the replaced digit
        - If the cursor is in the integer part, at position zero, keyvalue is zero
          and at least the whole integerpart is selected replace the 
          integerpart with zero and put the cursor to position 1
        - If the cursor is in the integer part, at position zero, keyvalue is 
          zero and less than the whole integerpart is selected the zero digit 
          is not printed cursorposition stays the same		
        - If the cursor is in the integer part, at position zero, keyvalue is not 
          zero replace the selected integerpart  with the typed digit one 
          and put the cursor after the new digit
        - If the cursor is in the integer part, at a non-zero position and
          a digit is typed replace the selected integerpart with the typed 
         digit one and put the cursor after the new digit

      - Behaviour on minus sign keydown (only if the attribute 
        allowNegativeSign is set for the element)
        With nothing selected   
        - If the input value does not already start with a minus and the
           cursor is at position zero print 
          the minus, put the cursor to the right of the minus
        - If the input value does start with a minus and the cursor is at 
          position zero put the cursor to the right of the minus
        With a selection
        - If the selection starts at position zero, ends before the last 
          integer digit while there are more than one digits in the
          integerpart replace the selection with the minus, 
          put the cursor after the minus
 
      - Behaviour on select all
        This action is allowed	

      - Behaviour on cut 
        This action is disallowed for now 

      - Behaviour on copy
        This action is allowed 

      - Behaviour on paste 
        - A warning appears for three seconds when the action is not allowed  
        The paste is not allowed when
        - Not the whole input is selected
        - The clipboard value is not conform the input attribute values
        - The clipboard value contains invalid characters
        - The clipboard value does not start with a digit

[factoryd]

I’m on mobile currently, so I can’t do a thorough review. Just glancing at the code, nice work. It’s clear and concise. It also proves that js needs a std lib.

The only thing that stuck out immediately is that you need to decouple from the DOM API and make it a proper npm lib that is distributed already transpiled to ES5.

[StefanHoutzager]

@factoryd

decouple from the DOM API

Thanks! Any tips on decoupling from the DOM API? An article or a github page where it’s done right?

[peerreynders]

• Behaviour on digit keydown
  With nothing selected
  …
• If the cursor is in the integer part on a position immediately left of the first digit and the integerpart value is zero (or -0) replace the zero and put the cursor one position to the right

This aspect could take some people by surprise.

If I deliberately aim the cursor to the left of the zero to type “1” with the intent of having a “10” I’m greeted with a “1”.

This rule is probably a consequence of forcing a value in the field - it’s impossible to have value === '' to in indicate an unspecified, optional value.

Also as far as I can tell the value attribute is ignored, so the initial value is always 0.

preferably on the github page

You may have reasons for doing it this way - so I can’t really have an issue with it.

[NobbZ]

Most as-I-type-validators-with-invalid-key-blocking do confuse me while I’m typing and editing. Usually they are in my way.

Even worse, many of them deny to accept copy-pasted inputs and mangle it.

Lets say I have some german formatted number with decimals (1.024,99 € => One thousand twentyfour Euro and ninety-nine Cent). Copypasting that from the bill to your input field will probably leave me with one Euro and 2 Cent. A lot of manual editing necessary to get it right again.

I’ve encountered even worse interfaces with my bank, which during a timeframe of 3 months, deleted the input field on an invalid keystroke. This made pasting bank account numbers close to impossible, as they are usually written grouped by 4 digits delimited by spaces. As a workaround they tried to disable pasting… Of course “due to security measures” the site does not work anymore when you disable JavaScript. (I have to say, its much better today, and unless you are using a chip tan device you can use it without JavaScript now).

[StefanHoutzager]

Try mine and paste the 1.024,99 without the euro sign (just download the .html and open in in f.e. chrome). It works. Pasting the value without thousands separators also, the thousands separtor will be added to the input value. It does not delete the value of an input with an invalid keystroke, it just does not echo the key. I’m used to a decimal input that works about this way in the gui desktop applications I programmed for 20+ years. In some ways I improved it a bit, in some I let out some handy functionality as it would cost more work. I have never seen a decimal input that works neatly in web applications.

[StefanHoutzager]

Thanks. I’ll sleep a couple of nights over this one. I have not thought about it thoroughly, this one is copied from the workings of the desktop gui development environment I programmed with for 20+ years. While retrying this environment I see that it replaces the last digit of the integerpart before the decimal separator always when the cursor is put left of it, even if there are more digits in the integerpart. At other cursorpositions (except right left of the decimal separator) in the integerpart the digit is inserted when the max number of digits is not exceeded. A small riddle…

[tcoopman]

There was recently a library submitted to hacker news: https://nosir.github.io/cleave.js/. There are some interesting comments about not using this https://news.ycombinator.com/item?id=19233637 because it can be very confusing for a user.
I mostly agree with this. I’ve also done format as you type in the past, but given up on it and switched to doing a validation/transformation after the user is done (and also saving the original content so the user can edit easily).

disclaimer: I haven’t tested your library.

[StefanHoutzager]

I’m used to desktop applications and find the format as you type at least in the case of a decimal handier than validation/transformation after the user is done. Just try my test html before sending a judgement. It is a lot of work to get it right because there do not seem to be decent libs for this and I have never seen it work in a to me acceptable way on the web. I often found desktop gui’s offering a better ux than web apps.

[StefanHoutzager]

Thanks again for your mindfullnees. I’m going to change this requirement + the implementation. I think I found out why it works this way in my desktop dev environment. For decimal input you can assign a format property like ‘->,>>>.>>9.99’ (you can find equivalents in other desktop gui dev environments, maybe also in visual form designers for mobile) which is equivalent to numDecimals=2, maxDigits=9, allowNegativeSign in my implementation. The 9 in that format says a digit is always shown, default is 0.00 in case of the shown format (or 0,00 in Europe). For 9 in the format the rule is: replace this number when the cursor is left of it and a digit is typed. Makes sense for the decimal part, and for an integer with format ‘999’ for example, but not in case of a decimal where there are more than one digits in the integer part while the last integer digit is formatted with a 9.

[StefanHoutzager]

I tried numeral formatting in https://nosir.github.io/cleave.js/. It’s unintuitive and you can even create nonsense values like 1,888. (a number with a decimalseparator at the end). I can understand the rejection when only looking at this input.

[StefanHoutzager]

Here some research results and conclusions on the value of auto formatting credit card number input while typing: https://baymard.com/blog/credit-card-field-auto-format-spaces as some question this value. I have btw changed and implemented a requirement change in my github project triggered by Peer’s remark. I’m still wondering about factoryd 's remark “you need to decouple from the DOM API” . Maybe a dumb question, but why would you do that?

[LostKobrakai]

@StefanHoutzager

Maybe a dumb question, but why would you do that?

The logic might be useful outside of a direct dom manipulation context, e.g. in frameworks like react or vue, where the framework handles all the dom updates for you.

[StefanHoutzager]

Ah! Thanks, I’ll see what I can do about it.