Nummerntyp Eingabefeld mit Inkrement deaktiviert mit CSS funktioniert nicht

Ich möchte ein input Feld in HTML, die nur number input (including decimal) mit Inkrement deaktiviert. Ich habe folgende verwendet:Nummerntyp Eingabefeld mit Inkrement deaktiviert mit CSS funktioniert nicht

/* Hide Spin arrows on input type number */ 
 

 
input[type="number"]::-webkit-outer-spin-button, 
 
input[type="number"]::-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; 
 
}

<input class="form-control" type="number" name="phone">

Das perfekt auf Google Chrome mit sich problemlos funktioniert. Aber, es funktioniert nicht auf Firefox. Weiß jemand, wo ich falsch liege? Gibt es eine andere Idee, um aus diesem Problem herauszukommen?

Danke,

Quelle

2017-06-15 Sagar Gautam

Ich verstehe es nicht, wie wird die CSS-Arbeit, wenn es zielt 'input' mit' type = "number" ', aber Sie werden mit einem' input' mit 'Typ = "Text" '? – Swellar

Wie können Sie ein 'Text'-Feld mit' [type = "number"] selector auswählen? –

@Swellar Es ist mein Tippfehler, ich habe aktualisiert –

Versuche

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

jedoch unter Verwendung input type = 'Zahl' verwenden, werden das nie versichern numerische Eingaben in Ihrer Eingabe in firefox gegeben. Sie müssen eine benutzerdefinierte Validierungsfunktion im Falle von Firefox schreiben. Dies ist ein Beispiel.

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
     input[type=number]::-webkit-inner-spin-button, 
 
     input[type=number]::-webkit-outer-spin-button { 
 
      -webkit-appearance: none; 
 
      -moz-appearance: none; 
 
      appearance: none; 
 
      margin: 0; 
 
     } 
 
     input[type=number] { 
 
      -moz-appearance:textfield; /*This is for firefox*/ 
 
     } 
 
    </style> 
 
    <script> 
 
     //Custom number validating function 
 
     function isNumber(evt) { 
 
      var iKeyCode = (evt.which) ? evt.which : evt.keyCode 
 
      if (iKeyCode != 46 && iKeyCode > 31 && (iKeyCode < 48 || iKeyCode > 57)) 
 
       return false; 
 

 
      return true; 
 
     } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <input type="number" name="phone" onkeypress="javascript:return isNumber(event)"> 
 
</body> 
 

 
</html>

Quelle

2017-06-15 06:42:22 Nitheesh

immer noch nicht funktioniert –

Ist das Pfeilsymbol immer noch angezeigt? – Nitheesh

Pfeil-Symbol nicht angezeigt, das ist in Ordnung, aber es dauert auch Text und Typ Nummer nicht woking –

i dont no warum auf Ihrem firebox Browser oder einem anderen reasion wegen Version seine nicht funktioniert

dieser Code perfekt auf meine beiden firefox Browser arbeiten und crome

Änderung input type text-number erste

<input class="form-control" type="number" name="phone">

und Ihr CSS-Code

<style type="text/css"> 
/* Hide Spin arrows on input type number */ 
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-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; 
} 
</style>

Quelle

2017-06-15 06:40:48

Nummerntyp Eingabefeld mit Inkrement deaktiviert mit CSS funktioniert nicht

Antwort

Verwandte Themen