Textbox should allow only decimals

Question

I have created a dynamic html table with some input controls and here I want to enter only decimal values with two digits after dot(.)

ex: 1111.22 , 44445454.33

Html code:

<div id="divdynamic"></div>

And I append dynamic data to this id divdynamic

jQuery code:


$(document).ready(function () {
decimaldata();
});

function decimaldata()
{
var data = `<div class="closedata"><input type="text" class="fields" name="txtdecimal" autocomplete="off" onkeyup="decimalonly('txt1',this)" value=""></div>
<div class="closedata"><input type="text" class="fields" name="txtdecimal1" autocomplete="off" onkeyup="decimalonly('txt2',this)" value=""></div>`

$("#divdynamic").append(data);

}

function decimalonly(n,t)
{
if(n == "txt1")
{

if (((event.which != 46 || (event.which == 46 && $(this).val() == '')) ||
            $(this).val().indexOf('.') != -1) && (event.which != 45 || $(this).val().indexOf('-') != -1) &&
            (event.which < 48 || event.which > 57)) {
            event.preventDefault();

            //alert('hit');
          }

 // here my logic 
}
else
{
if (((event.which != 46 || (event.which == 46 && $(this).val() == '')) ||
            $(this).val().indexOf('.') != -1) && (event.which != 45 || $(this).val().indexOf('-') != -1) &&
            (event.which < 48 || event.which > 57)) {
            event.preventDefault();

            //alert('hit');  
        }

    // here my logic 


}


}

In the above method decimalonly(n,t) I'm checking the entered key but that code is not working fine but if I entered any (non digit value) the alert('hit'); message is hitting but the entered non digit value is showing on the UI, it should not happen should only take decimals.

please suggest me how to achieve this.

Sorry for my bad English.

Does this answer your question? [Allow 2 decimal places in ](https://stackoverflow.com/questions/34057595/allow-2-decimal-places-in-input-type-number) — Nico Haase, Feb 23 '23 at 12:49
Is there a reason why you're not using the number input? `` This would stop the form submission until the correct number of decimal places are used — Harrison, Feb 23 '23 at 12:50

Gaurav Sharma · Accepted Answer · 2023-02-24T04:07:56.463

I have removed the "decimalonly" function and added an event listener to all inputs with the .fields class.

document.addEventListener('DOMContentLoaded', function() {
  decimaldata();
});

function decimaldata() {
  var data = `<div class="closedata">First Number <input type="text" class="fields" name="txtdecimal" autocomplete="off" oninput="decimalonly(event, 'txt1', this)" value=""></div>
  <div class="closedata"> Second Number <input type="text" class="fields" name="txtdecimal1" autocomplete="off" oninput="decimalonly(event, 'txt2', this)" value=""></div>`;

  document.querySelector('#divdynamic').innerHTML = data;
}

function decimalonly(event, n, t) {
  if (n === 'txt1' || n === 'txt2') {
    var value = t.value;

    // only allow numbers and one dot
    value = value.replace(/[^0-9.]/g, '');
    var dotCount = (value.match(/\./g) || []).length;

    if (dotCount > 1) {
      // remove any extra dots
      value = value.replace(/\./g, function(match, offset) {
        return offset ? '' : '.';
      });
    }

    // limit to two decimal places
    var decimalIndex = value.indexOf('.');
    if (decimalIndex !== -1 && value.length - decimalIndex > 3) {
      value = value.substring(0, decimalIndex + 3);
    }

    // update the input value
    t.value = value;
  }
}

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

input[type=text]:focus {
  border: 3px solid #555;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divdynamic"></div>

When the user types in one of these inputs, the code removes any characters that are not digits or a period and then ensures that there is only one period in the input and that there are no more than two digits after the period.

Note: if you use `$(this).val(value);` *during* user input, it will break the UX. There are better ways to replace an input's text while keeping the input caret. — freedomn-m, Feb 23 '23 at 13:16

Textbox should allow only decimals

1 Answers1