fr1sk fr1sk - 1 year ago 233
CSS Question

Polymer 1.0 paper-input disable spinner on type="number"

My question is same as the title, how to disable spinner on polymer 1.0 paper-input component where the type is number.

<paper-input type="number" label="Discount"></paper-input>

enter image description here

I want to disable those arrows on the right side of paper-input.

Answer Source

I can offer you a bodge if you like, I don't think there is a way to stop the spinner coming up. But what we can do is make it text and prevent the user from inputting anything but numbers.

var numberInputSel = document.querySelectorAll("paper-input.number");
for (var i = 0; i < numberInputSel.length; ++i) {
  numberInputSel[i].addEventListener("keypress", function(evt) {
    if (evt.which < 48 || evt.which > 57) {
  numberInputSel[i].addEventListener("touchstart", function(evt) {
    this.setAttribute("type", "number")
<base href="">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">

<paper-input label="Amount" value="35" class="number"></paper-input>


I've made a slight edit, now when people touch it on mobile it will set the type as number (meaning the numeric keyboard shows) but on desktop it stays as text.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download