Question

我有一个文本框。有没有办法让用户输入的最高值为100，最低值为0？

因此，如果用户键入的数字超过100，那么它将使用keyup（）函数自动将值更改为100，如果用户输入的数字小于0，它将显示为0？

我的文字框如下：

<input type="text" name="textWeight" id="txtWeight" maxlength="5"/>%</td>

可以使用JavaScript完成吗？

Answer 1

这是一个简单的功能，可以满足您的需求：

<script type="text/javascript">
function minmax(value, min, max) 
{
    if(parseInt(value) < min || isNaN(parseInt(value))) 
        return min; 
    else if(parseInt(value) > max) 
        return max; 
    else return value;
}
</script>
<input type="text" name="textWeight" id="txtWeight" maxlength="5" onkeyup="this.value = minmax(this.value, 0, 100)"/>

如果输入不是数字，则将其替换为零

Answer 2

如果您对HTML5没问题，可以在没有任何JavaScript代码的情况下完成...

<input type="number" name="textWeight" id="txtWeight" max="5" min="0" />

否则，就像......

var input = document.getElementById('txtWeight');

input.addEventListener('change', function(e) {
    var num = parseInt(this.value, 10),
        min = 0,
        max = 100;

    if (isNaN(num)) {
        this.value = "";
        return;
    }

    this.value = Math.max(num, min);
    this.value = Math.min(num, max);
});

这只会在输入失去焦点时重置值，并清除任何无法解析为整数的输入......

义务警告

无论客户端验证如何，您都应始终对输入执行足够的服务器端验证。

Answer 3

我通常会做这样的事情（onblur），但它可以附加到任何事件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function CheckNo(sender){
    if(!isNaN(sender.value)){
        if(sender.value > 100 )
            sender.value = 100;
        if(sender.value < 0 )
            sender.value = 0;
    }else{
          sender.value = 0;
    }
}

</script>
</head>

<body>
<input type="text" onblur="CheckNo(this)" />
</body>
</html>

Answer 4

这取决于数字的种类和允许的内容。处理带小数的数字比简单整数更难。处理允许多种文化的情况再次变得更加复杂。

基础是这些：

处理文本框的“按键”事件。如果按下了不允许的字符，请取消对事件的进一步处理，以便浏览器不会将其添加到文本框中。
在处理“按键”时，根据按下的键简单地创建潜在的新字符串通常很有用。如果字符串是有效数字，请允许按键。否则，折腾按键。这可以极大地简化部分工作。
如果您关注“按键”无法处理的键，则可能会处理“keydown”事件。

Answer 5

是的，它可以！您可以考虑首先将maxlength的值设置为3，然后为keyup-event写一个事件处理程序。

如果输入不正确，该函数可以使用regex或parseInt评估用户输入以验证用户输入并将其设置为任何所需的值。

Answer 6

如果您不使用HTML5，这是一个非常基本的JavaScript表单验证。

旁注 - 我会在模糊事件而不是键盘上将值更改为0（作为用户，我认为在我输入时更改文本会让人感到厌烦）。

Answer 7

在CodeBehind中设置属性

textWeight.Attributes.Add("minimum", minValue.ToString());
textWeight.Attributes.Add("maximum", maxValue.ToString());

结果：

<input type="text" minimum="0" maximum="100" id="textWeight" value="2" name="textWeight">

通过jQuery

    jQuery(document).ready(function () {

        var textWeight = $("input[type='text']#textWeight");

        textWeight.change(function () {

              var min = textWeight.attr("minimum");

              var max= textWeight.attr("maximum");

              var value = textWeight.val();

              if(val < min || val > max)
              {
                    alert("Your Message");

                    textWeight.val(min);
              }

        });
    });

Answer 8

非常简单，亲爱的你可以使用范围验证器

<asp:TextBox ID="TextBox2" runat="server" TextMode="Number"></asp:TextBox>
<asp:RangeValidator ID="RangeValidator1" runat="server"   
    ControlToValidate="TextBox2"   
    ErrorMessage="Invalid number. Please enter the number between 0 to 20."   
    MaximumValue="20" MinimumValue="0" Type="Integer"></asp:RangeValidator>   
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"   
    ControlToValidate="TextBox2" ErrorMessage="This is required field, can not be blank."></asp:RequiredFieldValidator>

否则您可以使用javascript

<script>
function minmax(value, min, max) 
{
    if(parseInt(value) < min || isNaN(parseInt(value))) 
        return 0; 
    else if(parseInt(value) > max) 
        return 20; 
    else return value;
}
</script>                        
<input type="text" name="TextBox1" id="TextBox1" maxlength="5"
onkeyup="this.value = minmax(this.value, 0, 20)" />

Answer 9

https://jsfiddle.net/co1z0qg0/141/

<input type="text">
<script>
$('input').on('keyup', function() {
    var val = parseInt($(this).val()),
        max = 100;

    val = isNaN(val) ? 0 : Math.max(Math.min(val, max), 0);
    $(this).val(val);
});
</script>

或更好

https://jsfiddle.net/co1z0qg0/142/

<input type="number" max="100">
<script>
$(function() {
    $('input[type="number"]').on('keyup', function() {
        var el = $(this),
            val = Math.max((0, el.val())),
            max = parseInt(el.attr('max'));

        el.val(isNaN(max) ? val : Math.min(max, val));
  });
});
</script>
<style>
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
</style>

Answer 10

功能

getValue(input){
        var value = input.value ? parseInt(input.value) : 0;
        let min = input.min;
        let max = input.max;
        if(value < min) 
            return parseInt(min); 
        else if(value > max) 
            return parseInt(max);
        else return value;
    }

用法

changeDotColor = (event) => {
        let value = this.getValue(event.target) //value will be always number
        console.log(value)
        console.log(typeof value)
}

文本框中的最大值和最小值

10 个答案: