jQuery deaktivieren Textbox Eingang für Typ-Nummer

Question

Ich habe einen HTML-Markup, das wie folgt aussieht:

<input type="number" step="0.1" min="0" max="100" value="1" class="form-control breakEvenInput" style="width:150px" /><br /> 
<button type="submit" class="btn btn-primary saveBreakEven">Save</button> 

Wie Sie die Eingabe vom Typ „Zahl“ zu sehen ist ... Was ich denke wurde (wenn es möglich ist), um hier zu tun ist, den Endbenutzer zu deaktivieren, so dass er/sie nicht in der Lage ist, etwas in den Textkasten einzugeben, sondern den Benutzer nur die Seite scrool auf/ab Pfeile, die er bekommt, wenn Browser die HTML-Eingabe als rendert Art der "Nummer".

Ich habe versucht, HTML-Eingabe "deaktiviert" oder "Readonly" -Eigenschaften hinzuzufügen, aber das gab mir nicht das gewünschte Ergebnis. Wenn ich es so mache, ist das gesamte Textfeld deaktiviert ...

Ich dachte, dass dies irgendwie über jQuery gemacht werden könnte? Kann mir jemand helfen?

P.S. Also möchte ich die Eingabe in das Textfeld über die Tastatur deaktivieren, aber die Pfeile nach oben/unten im Textfeld lassen, damit der Benutzer den Wert ändern kann, so dass der Benutzer nichts eingeben kann, sagen wir 99999999999 Nummer. .?

Answer 1

Ein Problem, das Sie haben, ist verschiedene Browser-Unterstützung und render type = "Nummer" unterschiedlich. Ich würde vorschlagen, ein span-Element für die Anzahl Auslesen (ff Sie müssen es als Eingabe haben, würde ich es ausblenden), und verwenden Sie Schaltflächen oder Elemente formatiert, um zu erhöhen, verringern Sie die Zahl und aktualisieren Sie das Eingabefeld. Dies wird eine einheitliche Benutzererfahrung in allen Browsern ermöglichen.

<!--style these how you want--> 
<span id="number">0</span> 
<button id="add>Up</button><button id="sub">Down</button> 

<script> 
    var step = 1; 
    var output = $('#number'); 
    var up  = $('#add'); 
    var sub = $('#sub'); 

    up.add(sub).on('click', function() { 
     var num = output.val(); 

     num += ($(this).attr('id') == 'add') ? step : (-1 * step); 
     if(isNumValid(num)) { 
     output.val(num); 
     } else { <!-- error reporting here --> } 

    } 

    function isNumValid(num) { 
     <!-- run validations here, integer, float, positive, etc --> 
     return true/false; 
    } 

</script> 

Answer 2

Eines der Dinge, die Sie tun können, ist die keydown Ereignis zu verhindern.

$(function() { 
 

 
    $('input').on('keydown', function(e) { 
 
    e.preventDefault(); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="number" step="0.1" min="0" max="100" value="1" class="form-control breakEvenInput" style="width:150px" /><br /> 
 
<button type="submit" class="btn btn-primary saveBreakEven">Save</button>

Auf diese Weise können Sie die Pfeile aktiv zu halten, aber deaktivieren Tasten auf der Tastatur. Im Ereignisobjekt (e) können Sie auch prüfen, welche Taste gedrückt wurde (wenn Sie z. B. Backspace oder Pfeile unterstützen möchten).

Answer 3

$(function() { 

    $('input[type=number]').on('keydown', function(e){ 
    e.preventDefault(); 
    }); 
});