Number input with controls
How do I make an number input with controls?
What is a number input with controls? How do you make a number input with controls? This script and codes were developed by Daniel Grant on 28 December 2022, Wednesday.
Number input with controls - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Number input with controls</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
.input-number { width: 80px; padding: 0 12px; vertical-align: top; text-align: center; outline: none;
}
.input-number,
.input-number-decrement,
.input-number-increment { border: 1px solid #ccc; height: 40px; user-select: none;
}
.input-number-decrement,
.input-number-increment { display: inline-block; width: 30px; line-height: 38px; background: #f1f1f1; color: #444; text-align: center; font-weight: bold; cursor: pointer;
}
.input-number-decrement:active,
.input-number-increment:active { background: #ddd;
}
.input-number-decrement { border-right: none; border-radius: 4px 0 0 4px;
}
.input-number-increment { border-left: none; border-radius: 0 4px 4px 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <span class="input-number-decrement">–</span><input class="input-number" type="text" value="1" min="0" max="10"><span class="input-number-increment">+</span> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Number input with controls - Script Codes CSS Codes
* { box-sizing: border-box;
}
.input-number { width: 80px; padding: 0 12px; vertical-align: top; text-align: center; outline: none;
}
.input-number,
.input-number-decrement,
.input-number-increment { border: 1px solid #ccc; height: 40px; user-select: none;
}
.input-number-decrement,
.input-number-increment { display: inline-block; width: 30px; line-height: 38px; background: #f1f1f1; color: #444; text-align: center; font-weight: bold; cursor: pointer;
}
.input-number-decrement:active,
.input-number-increment:active { background: #ddd;
}
.input-number-decrement { border-right: none; border-radius: 4px 0 0 4px;
}
.input-number-increment { border-left: none; border-radius: 0 4px 4px 0;
}
Number input with controls - Script Codes JS Codes
(function() { window.inputNumber = function(el) { var min = el.attr('min') || false; var max = el.attr('max') || false; var els = {}; els.dec = el.prev(); els.inc = el.next(); el.each(function() { init($(this)); }); function init(el) { els.dec.on('click', decrement); els.inc.on('click', increment); function decrement() { var value = el[0].value; value--; if(!min || value >= min) { el[0].value = value; } } function increment() { var value = el[0].value; value++; if(!max || value <= max) { el[0].value = value++; } } } }
})();
inputNumber($('.input-number'));
Developer | Daniel Grant |
Username | djgrant |
Uploaded | December 28, 2022 |
Rating | 4.5 |
Size | 2,867 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
CSS triangles with border | 3,146 Kb |
Loading bar for ajax pages | 2,464 Kb |
Wireframe Planet | 5,744 Kb |
Responsive Modal | 4,178 Kb |
A Pen by Daniel Grant | 2,464 Kb |
Touch rem | 2,979 Kb |
Transitioning application screens with semantically named classes | 3,697 Kb |
Zero element inline validation bubble | 4,117 Kb |
Facebook Paper Theme | 4,905 Kb |
Gradient Border | 2,600 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
A Pen by Tosh | Panev | 2,586 Kb |
Simple personal profile | Miroot | 2,856 Kb |
SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
SVG Circle Progress | JMChristensen | 3,368 Kb |
Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
Matrix | Stathisnikolaidis | 1,922 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!