HTML5 customization

Question

I have a HTML5 input box (type=number). My requirement is that the user should be able to set the value only through UP & DOWN arrow (spinners). User shouldn't be able to enter the value manually. Is it possible?

Any help is appreciated!

HTML

<tr ng-repeat="listitem in listitems">
  <input id="qtyinput" style="width:70px;" type="number" ng-model="listitem.qty" placeholder="Quantity" min='1' value='1'>
</tr>

only through up down arrow ... like on the keyboard, or a visual up / down arrow they click? — PlantTheIdea, Mar 16 '14 at 15:41
@ShouryaSharma did you try the solution I already suggested? — Minko Gechev, Mar 16 '14 at 15:46
i did. it's not working. i'm looking for - 'why it is not working' as it's working fine in the fiddle: http://jsfiddle.net/7q5Aq/1/ — Shourya Sharma, Mar 16 '14 at 15:59
I'm making a POS app in node-webkit. In kiosk mode, I need to disable all the elements wherein keyboard entries are possible. (It'll only be used either by **mouse** or **touch**) — Shourya Sharma, Mar 16 '14 at 18:24

Minko Gechev · Accepted Answer · 2014-03-16T16:01:14.567

4

Use:

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

For AngularJS specific solution you can create a custom directive:

angular.module('demo')
.directive('disableKeyboard', function () {
  return function (scope, el) {
    el.keydown(function (e) {
      e.preventDefault();
    }); 
  };
});

And apply it by:

<input disable-keyboard type="number">

edited Mar 16 '14 at 16:01

answered Mar 16 '14 at 15:40

Minko Gechev

25,304
9
61
68

really? jQuery? cant you just make the bloody input readonly? – PlantTheIdea Mar 16 '14 at 15:41
@PlantTheIdea by making the input readonly how would you be able to change its value using the arrows? – Minko Gechev Mar 16 '14 at 15:41
thats y i asked my question ... up and down arrow on the keyboard, or a visual up / down that they click? the spinners arent produced cross-browser, if you rely on them you're going to have a bad time. – PlantTheIdea Mar 16 '14 at 15:44
1

@MinkoGechev nvm, looks like the spinners only are his requirement, upvoted ur answer. – PlantTheIdea Mar 16 '14 at 15:46
@MinkoGechev You can also use `event.preventDefault()` if the `return false` doesn't work. Some additional [info](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false). – Gaurang Tandon Mar 16 '14 at 15:50
@GaurangTandon thanks for your suggestion and the link. The answer is fixed. – Minko Gechev Mar 16 '14 at 15:50
1

Apart from being dependent on JavaScript, and hence trivially overridable, this method means that a person who cannot use a mouse cannot use the control at all, not even using keys that would activate the spinner. So whatever the real disease (the original problem) might be, this cure must be worse than the disease. – Jukka K. Korpela Mar 16 '14 at 17:24
@JukkaK.Korpela, I agree but the code above fulfills completely the requirements in the question. And btw, "Unicode explained" is a great book. :-) – Minko Gechev Mar 16 '14 at 17:41

HTML5 customization

1 Answers1