2

I have a simple input box :

 <input type="number" class="reference_input" value="1234567" pattern="\d*" 
       onkeypress="unicode = event.charCode ? event.charCode : event.keyCode;           
       if(unicode < 48 || unicode > 57){return false;}" />

I need to have type="number" for android phones to open numeric keyboard by default.

The strange thing is that when I open this page in Chrome I see an auto incrementer field with top and bottom arrow.

Is there a way to remove this field (auto incrementer)?

EDIT :

I just found a similar question : Chrome auto formats input=number

Community
  • 1
  • 1
Murtaza Mandvi
  • 10,708
  • 23
  • 74
  • 109
  • If that's Chrome's default, about your best is either some hefty styling with an overlay, or setting the thing back to `type="text"` for Chrome only (which smells bad). Also, why are you disallowing `ctrl+v` in your field? I really hate to either have to use a mouse or retype a number if I already have that on my clipboard. – Wrikken Jul 28 '11 at 00:48
  • I cannot use type="text" as it does not allow numeric keyboard to open by default on Android, CSS fix might be tricky since there would be blank space in the beginning of the text box, which would look weird ! :) – Murtaza Mandvi Jul 28 '11 at 20:31
  • EUhm: I said _only_ for Chrome to alter it (so, use javascript for this), and I mean a _proper_ overlay (a lot of work, I grant you). Then again: I'd leave the buttons be. I tend to touch built-ins like form elements as less as possible, because users will recognize their defaults better. – Wrikken Jul 28 '11 at 21:02
  • Ah I see...that is what I had done, I have a condition which checks the browser ...otherwise inserts type="text" - not the best way around - sad – Murtaza Mandvi Jul 28 '11 at 21:35

1 Answers1

1

use this css:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
Hello Hack
  • 107
  • 5