文本框中只有数值和小于 6 的值 - js

Question

只有数字和小于 6 的值（可以是 5.9,4.6 ...但不是 6.01）的构建逻辑应该从输入中排除，已经尝试了一些并得到了解决方案但面临一些问题...

下方输入在 PHP 循环中是动态的：

<input type="text" name="prd_<?php echo $prd['id']; ?>" id="prd_<?php echo $prd['id']; ?>" onkeypress="return chkvalue(<?php echo $prd['id']; ?>,<?php echo $prd['wgh']; ?>,<?php echo $prd['price']; ?> ); "/>

<input type="text" name="prdinto_<?php echo $prd['id']; ?>" id="prdinto_<?php echo $prd['id']; ?>" />

结果如下：

<input type="text" name="prd_1" id="prd_1" onkeypress="return chkvalue(1,0.50,1430.00); "/> 
<input type="text" name="prdinto_1" id="prdinto_1" />

<input type="text" name="prd_2" id="prd_2" onkeypress="return chkvalue(2,0.20,1130.00); "/> 
<input type="text" name="prdinto_2" id="prdinto_2" />

<input type="text" name="prd_3" id="prd_3" onkeypress="return chkvalue(3,0.55,1340.00); "/> 
<input type="text" name="prdinto_3" id="prdinto_3" />

下面试过了：

function chkvalue(id,wgh,price)
{ 
    var number = document.getElementById("prd_"+id).value;
    if (isNaN(number.trim())) {
        alert("Enter only numbers.");
        document.getElementById("prd_"+id).value = "";  
    }

    if ( number.trim() > 6 ) {
        alert("Value entered must be 6 or lower.");
        document.getElementById("prd_"+id).value = "";
    }

    var ca = wgh * price;

     document.getElementById("prdinto_"+id).value = ca ;
     //document.getElementById("prdinto_"+id).value = ca;
}

我面临什么问题：

1} 当我在 prod_1 或 prod_2 的输入中键入任何 letter/words - 我收到 "Enter only number " 的警报，但在第一个字母之后：如果我键入 a ，然后没有警报但是只要我再次输入任何字母我就会收到警报......但我不想这样......我想要第一个字母它应该识别并发出警报

2} 第二个警报“输入的值必须为 6 或更低”- 在这里，当我键入 6.01 时，它也有值但没有警报..我希望值应低于 6 ...但它可以采用小数值像 4.5 或 4.6

3} 当我制作 tab 时，它只显示警报，需要在鼠标移动、键盘输入等时发出警报....

4} 最后 prdinto_1、prdinto_2、prdinto_3 他们没有得到价值。

需要 something like this - 1,2,3 分。

jsffle

有时我会在文本框中得到 "undefined"

Answer 1

首先，您应该使用 onkeyup 事件而不是 onkeypress 事件。所以使用 onkeyup() 方法而不是 onkeypress() method.Then 大部分问题都会消失！

    <!DOCTYPE html>
        <table>
        <tr>
          <td>
            <input type="text" placeholder="prd_1" name="prd_1" id="prd_1" onkeyup="chkvalue(1,0.50,1430.00)"/> 
          </td>
          <td>
                <input type="text"  placeholder="prdinto_1" name="prdinto_1" id="prdinto_1" />
          </td>
        </tr>
        <tr>
          <td>
            <input type="text" placeholder="prd_2" name="prd_2" id="prd_2" onkeyup="chkvalue(2,0.20,30.00); "/> 
          </td>
          <td>
             <input type="text" placeholder="prdinto_2" name="prdinto_2" id="prdinto_2" />
          </td>
        </tr>
        <tr>
          <td>
               <input type="text" placeholder="prd_3" name="prd_3" id="prd_3" onkeyup="chkvalue(3,0.55,10.00); "/> 
          </td>
          <td>
                <input type="text" placeholder="prdinto_3" name="prdinto_3" id="prdinto_3" />
          </td>
        </tr>
        </table>
      <script>  
        function chkvalue(id,wgh,price)
    { 
        var number = document.getElementById("prd_"+id).value;
        if (isNaN(parseInt(number.trim()))) {
            alert("Enter only numbers.");
            document.getElementById("prd_"+id).value = "";  
        }

        if ( number.trim() > 6 ) {
            alert("Value entered must be 6 or lower.");
            document.getElementById("prd_"+id).value = "";
        }

        var ca = wgh * price;
        document.getElementById("prdinto_"+id).value = ca;
        //document.getElementById("prdinto_"+id).value = ca;

 if (isNaN(parseInt(number.trim()))) {
            alert("Enter only numbers.");
            document.getElementById("prd_"+id).value = "";  
            document.getElementById("prdinto_"+id).value = "";
        }

    }

    </script>

这段代码工作得很好！ :) 检查一下

文本框中只有数值和小于 6 的值 - js

Only Numeric Value and Value less then 6 from textbox - js

javascript

php

validation

jquery

numeric