Question

我对输入中的按键有疑问。我有两个输入，这个输入必须进行除法计算。今天它的工作方式如下，独立于用户选择开始键入的输入，通过按键进行计算。我想知道的是，是否有更好或更具表现力的方式。

<input id="inputone" type="text" />
<input id="inputtwo" type="text" />
$('#inputone').keypress(function() {
    let inputOne = $('#inputone').val();
    let inputTwo = $('#inputtwo').val();
    if (inputTwo) {
      let calculate = parseFloat(inputOne/inputTwo);
      alert(calculate);
     }
 });

$('#inputtwo').keypress(function() {
  let inputOne = $('#inputone').val();
  let inputTwo = $('#inputtwo').val();
  if (inputOne) {
    let calculate = parseFloat(inputOne/inputTwo);
    alert(calculate);
  }
 });

JSFIDDLE

Answer 1

我认为使用模糊功能是一个好主意，因为有人试图键入1400每次点击一个键时它都不会分开。相反，它会在点击时分开。

$('#inputone').blur(function() {

$('#inputtwo').blur(function() {

或者，一旦用户想要分割，你就可以制作一个分割按钮。

<input id="divideButton" type="button" />

with：

$('#divideButton').click(function() {

Answer 2

您使用的是$().keydown()。我建议使用.keyup()，因为在输入数字后它会触发。如果事件在用户退格并清除字段后触发，则不会出现错误，因为数字变量将NaN并且if(NaN)在JavaScript中解析为false。

$('.CalculateMe').keyup(function(){ let Num1 = parseFloat($('#Number1').val()) let Num2 = parseFloat($('#Number2').val()); if(Num1 && Num2){ $('#Result').text(Num1 / Num2); } });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="Number1" class="CalculateMe" type="number" /> <input id="Number2" class="CalculateMe" type="number" /> <span id="Result"></span>

Answer 3

代码本身足够高效。是的，jQuery比原生DOM API慢;是的，代码可能已被重构以删除语法重复。然而，我认为可以添加一件事来改进它：回调限制。

如果用户输入速度太快，他们会看到更改可能太快，甚至无法理解，这会以浏览器性能为代价，尤其是在计算量巨大的情况下。为了减轻负载，您可以使用lodash's _.throttle或_.debounce函数，或者实现您自己的高阶函数，以防止回调过于频繁地执行。

所以看起来像

apply plugin: 'kotlin-kapt'

确保lodash库（或您自己的函数）已加载并在全局范围内可用（或导入，如果您使用模块）。

事实上，lodash是一个相当大的lib，会占用你的性能预算的很大一部分，所以要确保你确实遇到了一个至关重要的性能问题。

Answer 4

＆＃13;

$('#inputone, #inputtwo').on('change keyup input', (function() {

  $('label').html(
    $('#inputone').val() && $('#inputtwo').val() ?
    $('#inputone').val() / $('#inputtwo').val() : '0')
}));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="inputone" type="number"> /
<input id="inputtwo" type="number"> =
<label>0</label>

＆＃13;

按键计算值

4 个答案: