В калькуляторе jquery запретите пользователям нажимать десятичную более одного раза

Question

Я делаю калькулятор jquery, но пока он у меня есть, поэтому при нажатии отображаются только цифры и десятичная дробь. Однако мне нужно сделать так, чтобы пользователи не могли нажимать десятичную более одного раза, но я не уверен, как это сделать. Я также позволяю пользователям вводить свои числа, поэтому мне нужно, чтобы при нажатии на кнопку десятичной дроби ее можно было вводить только один раз, а при вводе десятичной дроби на клавиатуре (используя несколько кодов клавиш, например, код клавиши периода для десятичной дроби). в зависимости от того, что пользователь нажимает на клавиатуре).

$(document).ready(function() {
  $("#input").prop("disabled", true);
  $(".number").click(function() {
    var text = $('#input').val();
    if (text != "0") {
      var value1 = text;
      var ButtonVal = $(this);
      var value2 = ButtonVal.text();
      var inputfield = value1 + value2;
      $('#input').val(inputfield);

    } else {
      $('#input').val();
    }
  });


$(document).unbind('keypress').bind('keypress', function(e) {
    var text1 = $('#input').val();
    var text3 = text1;

    if (e.keyCode == 48) {
      var inputfield = text3 + "0"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 49) {
      var inputfield = text3 + "1"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 50) {
      var inputfield = text3 + "2"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 51) {
      var inputfield = text3 + "3"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 52) {
      var inputfield = text3 + "4"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 53) {
      var inputfield = text3 + "5"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 54) {
      var inputfield = text3 + "6"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 55) {
      var inputfield = text3 + "7"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 56) {
      var inputfield = text3 + "8"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 57) {
      var inputfield = text3 + "9"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 110) {
      var inputfield = text3 + "."
      $('#input').val(inputfield);

    }
    if (e.keyCode == 190) {
      var inputfield = text3 + "."
      $('#input').val(inputfield);

    }
    if (e.keyCode == 46) {
      var inputfield = text3 + "."
      $('#input').val(inputfield);

    }
  })
});

.threadbit .thread {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.divTable {
  display: table;
  width: 20%;
  text-align: center;
}

.divTableRow {
  display: table-row;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}

.divTableBody {
  display: table-row-group;
}

button {
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 1.1em;
  font-size: 1.1em;
  border-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>



<form>
  <input type="text" name="firstname" style="width:404px;height:60px;font-size:20px;" id="input"><br>
</form>
<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">sin</button></div>
      <div class="divTableCell"><button type="text" onclick="">cos</button></div>
      <div class="divTableCell"><button type="text" onclick="">tan</button></div>
      <div class="divTableCell"><input type="radio" name="mode" value="deg">Deg</div>
      <div class="divTableCell"><input type="radio" name="mode" value="rad">Rad</div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">sin<sup>-1</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">cos<sup>-1</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">tan<sup>-1</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">&pi;</button></div>
      <div class="divTableCell"><button type="text" onclick="">e</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">x<sup>y</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">x<sup>3</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">x<sup>2</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">e<sup>x</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">10<sup>x</sup></button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick=""><sup>y</sup>&radic;x</button></div>
      <div class="divTableCell"><button type="text" onclick=""><sup>3</sup>&radic;x</button></div>
      <div class="divTableCell"><button type="text" onclick="">&radic;x</button></div>
      <div class="divTableCell"><button type="text" onclick="">In</button></div>
      <div class="divTableCell"><button type="text" onclick="">log</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">&lpar;</button></div>
      <div class="divTableCell"><button type="text" onclick="">&rpar;</button></div>
      <div class="divTableCell"><button type="text" onclick="">1/x</button></div>
      <div class="divTableCell"><button type="text" onclick="">&percnt;</button></div>
      <div class="divTableCell"><button type="text" onclick="">n&excl;</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="7" onclick="">7</button></div>
      <div class="divTableCell"><button class="number" type="text" value="8" onclick="">8</button></div>
      <div class="divTableCell"><button class="number" type="text" value="9" onclick="">9</button></div>
      <div class="divTableCell"><button type="text" onclick="">&plus;</button></div>
      <div class="divTableCell"><button type="text" onclick="">Back</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="4" onclick="">4</button></div>
      <div class="divTableCell"><button class="number" type="text" value="5" onclick="">5</button></div>
      <div class="divTableCell"><button class="number" type="text" value="6" onclick="">6</button></div>
      <div class="divTableCell"><button type="text" onclick="">&minus;</button></div>
      <div class="divTableCell"><button type="text" onclick="">Ans</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="1" onclick="">1</button></div>
      <div class="divTableCell"><button class="number" type="text" value="2" onclick="">2</button></div>
      <div class="divTableCell"><button class="number" type="text" value="3" onclick="">3</button></div>
      <div class="divTableCell"><button type="text" onclick="">&times;</button></div>
      <div class="divTableCell"><button type="text" onclick="">M+</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="0" onclick="">0</button></div>
      <div class="divTableCell"><button class="number" type="text" value="." onclick="">.</button></div>
      <div class="divTableCell"><button type="text" onclick="">EXP</button></div>
      <div class="divTableCell"><button type="text" onclick="">&#xf7;</button></div>
      <div class="divTableCell"><button type="text" onclick="">M-</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">&plusmn;</button></div>
      <div class="divTableCell"><button type="text" onclick="">RND</button></div>
      <div class="divTableCell"><button type="text" onclick="">AC</button></div>
      <div class="divTableCell"><button type="text" onclick="">&#61;</button></div>
      <div class="divTableCell"><button type="text" onclick="">MR</button></div>

    </div>
  </div>
</div>

Answer 1

Вы можете просто использовать числовое значение ASCII и проверить десятичное число вхождения.

$('YOUR_SELECTOR').on("keypress keyup blur",function (event) {
  if ((event.which < 48 || event.which > 57) && (event.which != 46 || $(this).val().indexOf('.') != -1)) {
    event.preventDefault();
  }
});

Будьте осторожны, используя .val () и .text () в этой части условия $(this).val().indexOf('.') != -1 , Вы также должны знать, в чем разница между ними, вы можете обратиться к this .

. Вы также можете проверить по этой ссылке пример

Answer 2

Есть несколько мест, где вам нужно проверить, содержит ли входное значение уже ., прежде чем разрешить его вставку:

1. В обработчике событий для $(".number"), добавьте

   if (value2 != '.' || value1.indexOf('.') == -1) {
   

   перед обновлением $('#input')

2. В обработчике нажатия клавиш добавьте аналогичный тест для кода клавиши 46 (.):

   if ($('#input').val().indexOf('.') == -1) {
   

$(document).ready(function() {
  $("#input").prop("disabled", true);

  $(".number").click(function() {
    var text = $('#input').val();
    if (text != "0") {
      var value1 = text;
      var ButtonVal = $(this);
      var value2 = ButtonVal.text();
      if (value2 != '.' || value1.indexOf('.') == -1) {
        var inputfield = value1 + value2;
        $('#input').val(inputfield);
      }
    } else {
      $('#input').val();
    }
  });
  $(document).unbind('keypress').bind('keypress', function(e) {
    var text1 = $('#input').val();
    var text3 = text1;

    if (e.keyCode == 48) {
      var inputfield = text3 + "0"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 49) {
      var inputfield = text3 + "1"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 50) {
      var inputfield = text3 + "2"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 51) {
      var inputfield = text3 + "3"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 52) {
      var inputfield = text3 + "4"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 53) {
      var inputfield = text3 + "5"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 54) {
      var inputfield = text3 + "6"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 55) {
      var inputfield = text3 + "7"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 56) {
      var inputfield = text3 + "8"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 57) {
      var inputfield = text3 + "9"
      $('#input').val(inputfield);

    }
    if (e.keyCode == 110) {
      var inputfield = text3 + "."
      $('#input').val(inputfield);

    }
    if (e.keyCode == 190) {
      var inputfield = text3 + "."
      $('#input').val(inputfield);

    }
    if (e.keyCode == 46) {
      if ($('#input').val().indexOf('.') == -1) {
        var inputfield = text3 + "."
        $('#input').val(inputfield);
      }

    }
  })
});

.threadbit .thread {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.divTable {
  display: table;
  width: 20%;
  text-align: center;
}

.divTableRow {
  display: table-row;
}

.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}

.divTableBody {
  display: table-row-group;
}

button {
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 1.1em;
  font-size: 1.1em;
  border-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form>
  <input type="text" name="firstname" style="width:404px;height:60px;font-size:20px;" id="input"><br>
</form>
<div class="divTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">sin</button></div>
      <div class="divTableCell"><button type="text" onclick="">cos</button></div>
      <div class="divTableCell"><button type="text" onclick="">tan</button></div>
      <div class="divTableCell"><input type="radio" name="mode" value="deg">Deg</div>
      <div class="divTableCell"><input type="radio" name="mode" value="rad">Rad</div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">sin<sup>-1</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">cos<sup>-1</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">tan<sup>-1</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">&pi;</button></div>
      <div class="divTableCell"><button type="text" onclick="">e</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">x<sup>y</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">x<sup>3</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">x<sup>2</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">e<sup>x</sup></button></div>
      <div class="divTableCell"><button type="text" onclick="">10<sup>x</sup></button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick=""><sup>y</sup>&radic;x</button></div>
      <div class="divTableCell"><button type="text" onclick=""><sup>3</sup>&radic;x</button></div>
      <div class="divTableCell"><button type="text" onclick="">&radic;x</button></div>
      <div class="divTableCell"><button type="text" onclick="">In</button></div>
      <div class="divTableCell"><button type="text" onclick="">log</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">&lpar;</button></div>
      <div class="divTableCell"><button type="text" onclick="">&rpar;</button></div>
      <div class="divTableCell"><button type="text" onclick="">1/x</button></div>
      <div class="divTableCell"><button type="text" onclick="">&percnt;</button></div>
      <div class="divTableCell"><button type="text" onclick="">n&excl;</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="7" onclick="">7</button></div>
      <div class="divTableCell"><button class="number" type="text" value="8" onclick="">8</button></div>
      <div class="divTableCell"><button class="number" type="text" value="9" onclick="">9</button></div>
      <div class="divTableCell"><button type="text" onclick="">&plus;</button></div>
      <div class="divTableCell"><button type="text" onclick="">Back</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="4" onclick="">4</button></div>
      <div class="divTableCell"><button class="number" type="text" value="5" onclick="">5</button></div>
      <div class="divTableCell"><button class="number" type="text" value="6" onclick="">6</button></div>
      <div class="divTableCell"><button type="text" onclick="">&minus;</button></div>
      <div class="divTableCell"><button type="text" onclick="">Ans</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="1" onclick="">1</button></div>
      <div class="divTableCell"><button class="number" type="text" value="2" onclick="">2</button></div>
      <div class="divTableCell"><button class="number" type="text" value="3" onclick="">3</button></div>
      <div class="divTableCell"><button type="text" onclick="">&times;</button></div>
      <div class="divTableCell"><button type="text" onclick="">M+</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button class="number" type="text" value="0" onclick="">0</button></div>
      <div class="divTableCell"><button class="number" type="text" value="." onclick="">.</button></div>
      <div class="divTableCell"><button type="text" onclick="">EXP</button></div>
      <div class="divTableCell"><button type="text" onclick="">&#xf7;</button></div>
      <div class="divTableCell"><button type="text" onclick="">M-</button></div>

    </div>
    <div class="divTableRow">
      <div class="divTableCell"><button type="text" onclick="">&plusmn;</button></div>
      <div class="divTableCell"><button type="text" onclick="">RND</button></div>
      <div class="divTableCell"><button type="text" onclick="">AC</button></div>
      <div class="divTableCell"><button type="text" onclick="">&#61;</button></div>
      <div class="divTableCell"><button type="text" onclick="">MR</button></div>

    </div>
  </div>
</div>