Upon clicking outside of the input field, ensure that there is a space added to the

Question

Upon clicking outside of the input field, ensure that there is a space added to the

I have these input boxes where integers are entered. My goal is to display them similar to the images below:

1:

https://i.sstatic.net/3HUbO.png

2:

https://i.sstatic.net/4722H.png

$(document).ready(function() {
  $("input").each(function() {
    $(this).blur(function() {
      var len = $(this).val().length;


    });
  });

});

 .ndInbox {
   background-color: white;
   width: 390px;
   height: 42px;
   box-shadow: 0 2px 2px 0 #C2C2C2;
   border: none;
   outline: none;
   font-size: 18px;
   margin-bottom: 10px;
   font-family: 'PT Sans', sans-serif;
   padding-left: 10px;
 }
 .ndLabel {
   color: #999;
   font-size: 17px;
   font-family: 'PT Sans', sans-serif;
 }

<table>
  <tr>
    <td class="ndLabel" style="position: relative; width: 470px; top:-4px" id="avPurchase03">Average, &euro;:</td>
    <td colspan="2">
      <input id="lpcfIn02Id" class="ndInbox" type="text" value="" />
    </td>
  </tr>
  <tr>
    <td class="ndLabel" style="position: relative; width: 470px; top:-4px" id="avNumber03">Budget, &euro;:</td>
    <td colspan="2">
      <input id="lpcfIn03Id" class="ndInbox" type="text" value="" />
    </td>
  </tr>
</table>

An incomplete jQuery implementation using blur was attempted but did not achieve the desired functionality. Can my requirements, as depicted in the pictures above, be realized?

Thanks in advance.

jsFiddle

UPDATE: By clicking outside the input box, I also mean moving to the next field when tabbing.

javascript jquery html css

Answer 1

Answer №1

If you're looking to convert any input into a decimal with exactly two digits, you can achieve this by utilizing the Number() function for parsing and then formatting with toFixed():

<input class='make-decimal' />
<script>
    $(function(){
        // Trigger on blur
        $('.make-decimal').blur(function(){
            // Parse value as number and display as two digits
            $(this).val(Number($(this).val()).toFixed(2))
        })
    });
</script>

You can check out a demonstration here :

https://i.sstatic.net/8yc34.gif

To include spacing between digits, consider using Regular Expressions like below :

$(function(){
    $('.make-decimal').blur(function(){
        // Format number (without spaces)
        var formatted = Number($(this).val().replace(/\s/g,'')).toFixed(2);
        // Split decimal value
        var sections = formatted.split('.');
        // Insert space every third digit
        sections[0] = sections[0].replace(/\B(?=(\d{3})+\b)/g, " ");
        // Display updated content
        $(this).val(sections.join('.'));
    });
});

Find an example here :

https://i.sstatic.net/lhCg5.gif

Answer 2

If you're looking to convert any input into a decimal with exactly two digits, you can achieve this by utilizing the Number() function for parsing and then formatting with toFixed():

<input class='make-decimal' />
<script>
    $(function(){
        // Trigger on blur
        $('.make-decimal').blur(function(){
            // Parse value as number and display as two digits
            $(this).val(Number($(this).val()).toFixed(2))
        })
    });
</script>

You can check out a demonstration here :

https://i.sstatic.net/8yc34.gif

To include spacing between digits, consider using Regular Expressions like below :

$(function(){
    $('.make-decimal').blur(function(){
        // Format number (without spaces)
        var formatted = Number($(this).val().replace(/\s/g,'')).toFixed(2);
        // Split decimal value
        var sections = formatted.split('.');
        // Insert space every third digit
        sections[0] = sections[0].replace(/\B(?=(\d{3})+\b)/g, " ");
        // Display updated content
        $(this).val(sections.join('.'));
    });
});

Find an example here :

https://i.sstatic.net/lhCg5.gif

Upon clicking outside of the input field, ensure that there is a space added to the

Answer №1

Similar questions

Implementing the kendo-grid directive with a headerless row

What is the reason behind the CSS not rendering when async:false is used?

Trigger form submission with validation using jQuery

Show the date broken down into day, month, and year, as well as various combinations thereof

Calculating the total value of individual sections using Jquery

"Utilize jQuery to superimpose an image on top of

When attempting to download a PDF file through an API using JavaScript and React JS, it is found to be empty

Having trouble getting a background image to show up in a table cell when using CSS clear:both?

Utilizing both animation and loading effects using jQuery

Unable to implement CSS styling on Bootstrap collapsible menu

Dealing with ETIMEDOUT error in Express.js

Combatting repetitive code through the use of Redux toolkit and actions

Tips for generating a JSON string with nested structure

Displaying the content of a modal window

Enhancing the Google canvas script to incorporate numerous markers

What is the method used by Chrome dev tools to create CSS selectors?

Tips for Loading an Alternate JavaScript File When the Controller Action Result is Null

"Troubangular: Troubleshooting unexpected behavior when trying to update ngFor after setting a property

Tracking ajax calls with piwik: A step-by-step guide

Steps for redirecting to an external URL with response data following an HTTP POST request: