Как проверить пользовательский ввод без отправки формы?

Question

Я хотел бы проверить поле ввода пользователя, если он ввел 2 десятичных числа без отправки формы.Проверка должна происходить, когда просто выходит из поля ввода.Если он введен без десятичных знаков, я хочу добавить .00 к числу.Как мне этого добиться?Может кто-нибудь, пожалуйста, помогите?

образец кода здесь

<span style="font-weight:bold;">Profit Margin: </span><input type='number' step=0.01 placeholder='0.00'  id='ProfitMargin' name=profitmargin  value={$smarty.post.profitmargin}>
<span style="font-weight:bold;">%</span>

https://jsfiddle.net/rb746f3g/

Answer 1

Вы можете использовать jQuery и сделать это.Вы можете добавить .00, но для целого числа целое число, JS будет удалять его каждый раз, когда вы преобразуете его обратно в тип числа.

$("#ProfitMargin")
  .focusout(function() {
    var number = Number($("#ProfitMargin").val());
    alert(number);

        var isInteger = Number.isInteger(number);
    alert(isInteger);

    var floatingNumber = number;
    if(isInteger)
        floatingNumber = number + ".00";
    alert(floatingNumber);

    $("#ProfitMargin").val(floatingNumber.toFixed(2));
  });

Лучший способ добиться этого - использовать тип текстового поля, но вы будетесвободная функция шага тогда.Также ваше значение {$ smarty.post.profitmargin} должно измениться на текстовое.

Таким образом, ваш код изменится на -

    <span style="font-weight:bold;">Profit Margin: </span><input type='text' placeholder='0.00'  id='ProfitMargin' name=profitmargin >
    <span style="font-weight:bold;">%</span>

$("#ProfitMargin")
  .focusout(function() {
    var number = Number($("#ProfitMargin").val());
    alert(number);

        var isInteger = Number.isInteger(number);
    alert(isInteger);

    var floatingNumber = number;
    if(isInteger)
        floatingNumber = number + ".00";
    alert(floatingNumber);

    $("#ProfitMargin").val(floatingNumber);
  });

Вот рабочий пример - https://jsfiddle.net/s7en2amz/

Answer 2

Вы можете использовать тег "onKeyUp".

Это позволит проверить текстовое поле в тот момент, когда вы наведете курсор на текстовое поле.

<input type='number' step=0.01 placeholder='0.00'  id='ProfitMargin' name=profitmargin  value={$smarty.post.profitmargin} onKeyUp="if((this.value).isInteger()){this.value.toFixed(2)}">

Answer 3

вы можете использовать метод parseFloat.toFixed (2). здесь 2 нет. числового, который вы хотите.

$(document).ready(function(){
   $("#ProfitMargin").on('blur',function(){
           var current=$(this);
           current.val(parseFloat(current.val()).toFixed(2))
   })
})

 


   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style="font-weight:bold;">Profit Margin: </span><input type='number' step=0.01 placeholder='0.00'  id='ProfitMargin' name=profitmargin  value={$smarty.post.profitmargin} >
    <span style="font-weight:bold;">%</span>

Answer 4

Вы можете добавить функцию onchange. Ваш код будет выглядеть так:

<input type='number' step=0.01 placeholder='0.00' id='ProfitMargin' name=profitmargin value={$smarty.post.profitmargin} onchange='myFunction()'>

И в JavaScript:

myFunction()
{
   //your code
}