CODEWITHSUNDEEP
jquerypluginsinput
Raul
Raul

Reputation: 1024

Input type number jQuery plugin

I have a minor problem with a jQuery plugin for inputs with type number.

When I first click on the up arrow it will initiate with zero first then go to 1, 2, 3 probably because the min="0". I'm trying to keep the min="0" but when I press on the up arrow first time to go directly to 1. HTML

 <input class="extras" type="number" min="0"  step="1" name="extras" placeholder="0" />

Script

$( document ).ready(function() { // Document ready

  $("input[type='number']").stepper();

});

CSS

.stepper { border-radius: 3px; margin: 0 0 10px 0; overflow: hidden; position: relative; width: 300px; }
.stepper .stepper-input { background: #F9F9F9; border: 1px solid #ccc; border-radius: 3px; color: #333; font-size: 13px; line-height: 1.2; margin: 0; overflow: hidden; padding: 9px 10px 10px; width: 100%; z-index: 49; }
.stepper .stepper-input::-webkit-inner-spin-button,
.stepper .stepper-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .stepper-input:focus { background-color: #fff; }
.stepper .stepper-arrow { background: #eee url(stepper.png) no-repeat; border: 1px solid #ccc; cursor: pointer; display: block; height: 50%; position: absolute; right: 0; text-indent: -99999px; width: 20px; z-index: 50; }
.stepper .stepper-arrow.up { background-position: center top; border-bottom: none; top: 0; }
.stepper .stepper-arrow.down { background-position: center bottom; bottom: 0; }

Plugin https://github.com/benplum/Stepper

Here is the Fiddle: http://jsfiddle.net/NE2ap/6/

Can anybody help me with this? I really would like to use this plugin because I've already written the CSS for this to integrate into my website. The Fiddle is the default.

Upvotes: 0

Views: 4998

Answers (3)

Lucas Reis
Lucas Reis

Reputation: 471

Use this before the stepper.

$("input[type='number']").val('0');

This will start the input with 0 value.

Or set the value property of input.

Upvotes: 1

CodingIntrigue
CodingIntrigue

Reputation: 78545

Instead of setting the placeholder attribute, set the value instead:

<input class="extras" type="number" min="0"  step="1" name="extras" value="0" />

Here is an updated Fiddle.

Upvotes: 2

Anton
Anton

Reputation: 32581

Give the input value="0" The reason why you are getting the problem is because it's value is nothing, not even 0 so it will give the default min

<input value="0"class="extras" type="number" min="0" step="1" name="extras" placeholder="0"  />
//     ^^^^^^^^^ this

DEMO

Upvotes: 2

Related Questions