it-swarm.com.de

Kann ich das Drehfeld der Eingabe der HTML5-Nummer ausblenden?

Gibt es eine konsistente Möglichkeit für Browser, die neuen Drehfelder auszublenden, die einige Browser (z. B. Chrome) für die HTML-Eingabe der Typnummer darstellen? Ich suche nach einer CSS- oder JavaScript-Methode, um zu verhindern, dass die Auf-/Ab-Pfeile angezeigt werden.

<input id="test" type="number">
786
Alan

Dieses CSS verbirgt effektiv den Drehknopf für Webkit-Browser (hat es in Chrome 7.0.517.44 und Safari Version 5.0.2 (6533.18.5) getestet):

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
<input type="number" step="0.01" />

Sie können den Inspektor (Webkit, möglicherweise Firebug für Firefox) immer verwenden, um nach übereinstimmenden CSS-Eigenschaften für die Elemente zu suchen, an denen Sie interessiert sind, nach Pseudo-Elementen. Dieses Bild zeigt Ergebnisse für einen Eingabeelementtyp = "Zahl":

Inspector for input type=number (Chrome)

883
antonj

Firefox 29 fügt derzeit Unterstützung für Zahlenelemente hinzu. Hier ein Ausschnitt zum Ausblenden der Spinner in Webkit- und Moz-basierten Browsern:

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
<input id="test" type="number">

392
swehren

Kurze Antwort:

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;
}
<input type="number" />

Längere Antwort:

Zur vorhandenen Antwort hinzufügen ...

Feuerfuchs:

In aktuellen Versionen von Firefox ist der (Benutzeragent) Standardwert der -moz-appearance-Eigenschaft für diese Elemente number-input. Wenn Sie den Wert textfield ändern, wird der Spinner effektiv entfernt.

input[type="number"] {
    -moz-appearance: textfield;
}

In einigen Fällen möchten Sie, dass der Spinner anfangs ausgeblendet wird und dann im Hover/Fokus angezeigt wird. (Dies ist derzeit das Standardverhalten in Chrome). Wenn ja, können Sie Folgendes verwenden:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}
<input type="number"/>


Chrom:

In aktuellen Versionen von Chrome ist der (Benutzeragent) Standardwert der -webkit-appearance-Eigenschaft für diese Elemente bereits textfield. Um den Spinner zu entfernen, muss der Wert der Eigenschaft -webkit-appearance in den ::-webkit-outer-spin-button::-webkit-inner-spin-button Pseudoklassen in none geändert werden (standardmäßig ist dies -webkit-appearance: inner-spin-button).

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
<input type="number" />

Es sei darauf hingewiesen, dass margin: 0 verwendet wird, um den Rand in den Versionen _/ältere von Chrome zu entfernen.

Derzeit ist das Standard-Benutzer-Agent-Styling für die Pseudo-Klasse "Inner-Spin-Button" beim Schreiben dieses Dokuments:

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}
323
Josh Crozier

Laut Apples Guide zur Benutzererfahrung in Mobile Safari können Sie Folgendes verwenden, um eine numerische Tastatur im iPhone-Browser anzuzeigen:

<input type="text" pattern="[0-9]*" />

Eine pattern von \d* wird ebenfalls funktionieren.

119
team_steve

Verwenden Sie stattdessen input type="tel". Es öffnet sich eine Tastatur mit Zahlen und es werden keine Drehfelder angezeigt. Es erfordert kein JavaScript oder CSS oder Plugins oder irgendetwas anderes.

37
MERT DOĞAN

Fügen Sie dieses CSS nur hinzu, um den Spinner bei der Eingabe der Nummer zu entfernen

/* For Firefox */

input[type='number'] {
    -moz-appearance:textfield;
}



/* Webkit browsers like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
9
Sanjib Debnath

Dieses Problem ist mit einem input[type="datetime-local"] aufgetreten, der diesem Problem ähnelt.

Und ich habe einen Weg gefunden, diese Art von Problemen zu überwinden.

Zunächst müssen Sie die Shadow-Root-Funktion von Chrome über "DevTools -> Einstellungen -> Allgemein -> Elemente -> Benutzer-Agent-Schatten-DOM anzeigen" aktivieren.

Dann können Sie alle beschatteten DOM-Elemente sehen. Zum Beispiel für <input type="number"> lautet das vollständige Element mit beschattetem DOM:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

 shadow DOM of input[type="number"

Entsprechend diesen Informationen können Sie ein CSS erstellen, um unerwünschte Elemente zu verbergen, genau wie @Josh es gesagt hat.

8
Xiao Hanyu

Dies ist eine bessere Antwort, die ich vorschlagen möchte, wenn Sie mit der Maus über und ohne Maus überfahren

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }
3

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
<input id="test" type="number">

3
Prince Sharma

Nicht, wonach Sie gefragt haben, aber ich tue dies aufgrund eines Fokusfehlers in WebKit mit Spinboxen:

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

Es könnte Ihnen eine Idee geben, um bei dem zu helfen, was Sie brauchen.

3
Gaurav

Unter Firefox für Ubuntu einfach verwenden

    input[type='number'] {
    -moz-appearance:textfield;
}

hat den Trick für mich gemacht.

Hinzufügen

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Würde mich zu führen

Unbekannter Pseudo-Klassen- oder Pseudoelement-'-webkit-Outer-Spin-Button'. Regelsatz wegen schlechter Auswahl ignoriert.

ich habe es jedes Mal versucht. Gleiches für den inneren Drehknopf.

2
sonny_boy

Damit dies in Safari funktioniert, habe ich das Hinzufügen von! Wichtig für die Anpassung des Webkits erzwungen, und der Drehknopf wird ausgeblendet.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

Ich habe immer noch Probleme, eine Lösung für Opera zu finden.

1
luckychii

Ändern Sie möglicherweise die Zahleneingabe mit Javascript in Texteingabe, wenn Sie keinen Spinner möchten.

document.getElementById('myinput').type = 'text';

und den Benutzer anhalten, Text einzugeben;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

lassen Sie das Javascript dann wieder ändern, falls Sie einen Spinner möchten.

document.getElementById('myinput').type = 'number';

es funktionierte gut für meine zwecke

1
user3121518

sie können diesen einfachen Code in Ihrer CSS-Datei verwenden:

input[type="number"] {
-moz-appearance: textfield;
}
0
Ali Baghban