在jquery计算器中，防止用户多次点击小数答案

【问题标题】：In jquery calculator, prevent users from clicking decimal more than once在jquery计算器中，防止用户多次点击小数
【发布时间】：2020-01-31 02:58:17
【问题描述】：

我正在制作一个 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>

【问题讨论】：

标签： jquery calculator

【解决方案1】：

在允许插入之前，您需要检查输入值是否已经包含.：

在$(".number") 的事件处理程序中，添加
```
if (value2 != '.' || value1.indexOf('.') == -1) {
```
更新前$('#input')
在按键处理程序中，为键码 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>

【讨论】：

【解决方案2】：

您可以只使用数字 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();
  }
});

在条件$(this).val().indexOf('.') != -1 的这一部分中使用 .val() 和 .text() 时要小心。你也应该知道它们有什么区别，可以参考this。

您也可以在此链接中查看example

【讨论】：