Maximum-und minimum-Werte in einer textbox

Habe ich eine textbox. Gibt es eine Möglichkeit, wo der höchste Wert, den der Benutzer eingeben kann, ist 100 und die niedrigste ist 0?

So, wenn der Benutzer tippt eine Nummer mehr als 100, dann wird es automatisch ändern Sie den Wert auf 100 mit einem keyup () - Funktion und wenn der Benutzer eine Zahl kleiner als 0 wird mit 0 angezeigt?

Meine textbox unter:

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

Geht das mit JavaScript?

legen Sie einfach die max Länge bis zu 100, das ist es, keine javascript notwendig
umm.. Nein. Das wird nur verhindert, dass der Benutzer von der Eingabe in mehr als 100 Zeichen
Ich weiß, es sieht vielleicht nicht schön, aber gibt es irgendetwas, was verhindert, dass Sie über eine select-box? Sie können immer noch geben Sie eine Zahl ein, wenn das Feld den Fokus hat und es schränkt die Werte mit unnötige JS.

InformationsquelleAutor BruceyBandit | 2012-01-06

html javascript

Hier ist eine einfache Funktion, die tut, was Sie brauchen:

<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)"/>

Wenn die Eingabe nicht numerisch ist, es ersetzt es mit einem null -

warum würden Sie wollen, ändern Sie den Eingang auf 0? der Benutzer kann auch nicht erkennen, was passiert ist. Eine Art der Validierung wäre besser.
else if(parseInt(value) > max) return max; gibt max-Wert.

InformationsquelleAutor Nikoloff

18

Wenn Sie OK mit HTML5 erreicht werden kann, ohne irgendwelche JavaScript-code auf allen...
```
<input type="number" name="textWeight" id="txtWeight" max="5" min="0" />
```
Ansonsten, so etwas wie...
```
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);
});
```
Diese wird nur zurückgesetzt, die Werte bei der Eingabe verliert Fokus, und löscht alle Eingaben, die nicht analysiert werden, wie ein integer...

OBLIGATORISCHE WARNUNG

Sollten Sie immer durchführen, angemessene server-seitige Validierung auf den Eingängen, unabhängig von der client-seitige Validierung.
- Das max-Attribut ist derzeit nur unterstützt, Opera und Chrome.
- wahrscheinlich sollte überprüft werden, um sicherzustellen, dass der Wert eine Zahl ist
- Ich würde gerne verstehen, was du meinst.. Beispiel?
- Die javascript-Funktion muss eine kleine änderung: num = Math.max(num, min);
InformationsquelleAutor jondavidjohn

Ich würde normalerweise so etwas tun (onblur), aber es könnte sein, an jeder der Veranstaltungen:

<!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>

InformationsquelleAutor Evert

3

Hängt es von der Art der zahlen und was Sie zulassen. Umgang mit zahlen mit Nachkommastellen ist schwieriger als das einfache ganze zahlen. Umgang mit Situationen, in denen mehrere Kulturen erlaubt sind, ist komplizierter wieder.

Grundlagen sind diese:
- Griff das "keypress" - Ereignis für das Textfeld. Wenn ein Charakter, der nicht erlaubt wurde gedrückt, brechen Sie die weitere Verarbeitung von der Veranstaltung, so dass der browser nicht fügen Sie es in die textbox.
- Beim Umgang mit "keypress", es ist oft nützlich, um einfache erstellen der potenzielle neue Zeichenfolge auf Grundlage der Taste, die gedrückt wurde. Wenn der string eine gültige Zahl ist, erlauben die kepress. Ansonsten werfen Sie den Tastendruck. Dies kann stark vereinfachen einige der arbeiten.
- Potenziell behandeln Sie das Ereignis "keydown", wenn Sie besorgt sind, mit Tasten, die "keypress" nicht handhaben.
InformationsquelleAutor John Fisher
2

Ja, es kann! Sie überlegen zuerst, um den Wert von maxlength auf 3 und dann schreiben Sie einen Ereignishandler für das keyup-Ereignis.

Kann die Funktion bewerten Sie die Benutzer-Eingabe mit regex oder parseInt Validierung der Benutzereingaben und stellen Sie es auf jedem gewünschten Wert, wenn die Eingabe falsch ist.

InformationsquelleAutor Mithrandir
1

Wenn Sie nicht mit dem HTML5-dies ist eine ziemlich grundlegende JavaScript-Formular-überprüfung.

Seitliche Anmerkung - ich würde ändern Sie den Wert auf 0 auf das blur-Ereignis anstelle von keyup (als user finde ich den text ändern, wie ich Schreibe, wäre nervig ohne Ende).

InformationsquelleAutor Tim

Attribute setzen im CodeBehind

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

Ergebnis:

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

Durch 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);
              }

        });
    });

InformationsquelleAutor Ehsan

Seine ganz einfach Liebe, die Sie verwenden können range-validator

<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>

ansonsten können Sie javascript verwenden,

<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)" />

InformationsquelleAutor Ajitabh Mohanty

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>

oder besser

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>

InformationsquelleAutor asdasd

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.