4

Is it possible with jQuery & CSS to design a input field like that?

Amount

I am not sure where to start, any help highly appreciated!

Thanks in advance!

kritop
  • 607
  • 1
  • 12
  • 25
  • 6
    They are usually called "Spinners", e.g. from google http://btburnett.com/spinner/example/example.html – Alex K. Jan 25 '12 at 17:05
  • didnt know how they are called, great thanks i found also that jQuery is going to implement it in their 1.9 version: http://view.jqueryui.com/master/demos/spinner/default.html – kritop Jan 25 '12 at 17:41

3 Answers3

2

With HTML 5 some browser support this:

<input type="number" name="points" step="1" />

See here for a demo: http://jsfiddle.net/Gsk4f/ (Chrome or Opera)

This is a new HTML 5 attribute and is not supported by all browser

2

Here's simple way based on jQuery.

http://jsfiddle.net/acodesmith/aykZs/3/

The buttons aren't pratical, just showing what can be done. The importat part is the parent div.step .

EDIT: Updated Buttons http://jsfiddle.net/EK9vA/

aCodeSmith
  • 542
  • 2
  • 10
  • Lovely code. I (js)fiddled about with the buttons. You can see the results [here](http://jsfiddle.net/EK9vA/). – magicalex Jan 25 '12 at 18:24
  • You're both welcome. I stripped down the code a bit more and came up with [this](http://jsfiddle.net/hLRhU/). – magicalex Jan 25 '12 at 18:46
1

this is a great plugin!!

http://demos.kendoui.com/web/numerictextbox/index.html

MCSI
  • 2,818
  • 26
  • 35
  • looks great but adding another whole Javascript Framework just for this small thing seems not really practical, maybe there is some kind of jQuery plugin/extension – kritop Jan 25 '12 at 17:27
  • 1
    when you download it, you have every functionality separated in differents "js" files, so you add only what you want. for example only this plugin sizes 6KB – MCSI Jan 25 '12 at 17:37
  • ah cool, but i also found a jquery one: http://view.jqueryui.com/master/demos/spinner/default.html – kritop Jan 25 '12 at 17:41