Question

我有一个动态输入框，根据用户放置的内容改变价值。基本上获胜机会的范围从 0.01％到98％和支付/乘数的范围从 1.0102到9900 所以问题是当我提交它告诉输入有效值，而它们是有效的...因为我把JS代码放在不允许任何其他数字低于或高于该数字。

<div class="form">



  <form action="/" method="post">



     <div class="top-row">
      <div class="field-wrap">
      <label class="active">
            Win Chance
          </label>

        <input id="winc" value="49.5" type="number" min="0" max="98" onkeyup="wc(this);" />
      </div>

      <div class="field-wrap">
      <label class="active">
            Payout
          </label>
        <input id="payc" value="2" type="number" min="0" max="9900" onkeyup="pc(this)"   />
      </div>
    </div>



    <button type="submit" class="button">Get Started</button>

http://codepen.io/anon/pen/yMbPGa?editors=1010

JS代码

  function wc(input) {
    if (input.value < 0.01) input.value = 0.01;
    if (input.value > 98) input.value = 98;
    y = 99 / input.value;

    document.getElementById("payc").value = y;
  }

  function pc(input) {
    if (input.value < 1.0102) input.value = 1.0102;
    if (input.value > 9900) input.value = 9900;
    x = 99 / input.value;

    document.getElementById("winc").value = x;
  }

Answer 1

问题是输入类型number这里只接受整数值，而不是小数。这就是它抛出错误的原因。

执行此操作的最佳方法是，将输入类型用作text，并通过JavaScript或JQuery验证它是否在定义的范围之间。所以，你的代码如下：

<div class="form">
  <form action="/" method="post">
     <div class="top-row">
      <div class="field-wrap">
      <label class="active">
            Win Chance
          </label>

        <input id="winc" value="49.5" type="text" onkeyup="wc(this);" />
      </div>

      <div class="field-wrap">
      <label class="active">
            Payout
          </label>
        <input id="payc" value="2" type="text" onkeyup="pc(this)"   />
      </div>
    </div>
    <button type="submit" class="button">Get Started</button>

替代方式，您可以将属性step添加到输入类型number以使其接受小数。这不是您的方案的测试方法。

输入框有错误，提交范围号码

1 个答案: