干杯!我在前端并不擅长,所以,设计师窥视,你有什么想法如何实现类似这样的输入,我应该从什么开始?自定义数字输入
自定义数字输入
回答
这里是非常基本的例子它是如何做到的。当然你需要改变样式并根据需要调整元素。但是这个想法应该是可以理解的。
HTML:
<div class="spin"><span>–</span><input value="0" /><span>+</span></div>
CSS:
.spin {
display: inline-block;
}
.spin span {
display: inline-block;
width: 20px;
height: 22px;
text-align: center;
padding-top: 2px;
background: #ff0;
border: 1px solid #aaa;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
.spin span:first-child {
border-radius: 4px 0 0 4px;
}
.spin input {
width: 40px;
height: 20px;
text-align: center;
font-weight: bold;
}
的JavaScript:
var spins = document.getElementsByClassName("spin");
for (var i = 0, len = spins.length; i < len; i++) {
var spin = spins[i],
span = spin.getElementsByTagName("span"),
input = spin.getElementsByTagName("input")[0];
input.onchange = function() { input.value = +input.value || 0; };
span[0].onclick = function() { input.value = Math.max(0, input.value - 1); };
span[1].onclick = function() { input.value -= -1; };
}
首先 - 感谢您的回复!其次 - 如果我不需要单一输入,但是这样的输入有多少呢? – xamenrax 2013-03-26 11:07:47
尝试HTML5 input type number:
<input type="number"/>
没啥Firefox支持:(
编辑:或创建一个作为的Jakub建议:
<input type="text" id="numberInput" value="1"/>
<input type="button" id="btnIncrement" value="increment" onclick="increment();" />
<input type="button" id="btnDecrement" value="decrement" onclick="decrement();" />
function increment(){
var input = document.getElementById('numberInput');
input.value = parseInt(input.value) + 1;
}
function decrement(){
var input = document.getElementById('numberInput');
input.value = parseInt(input.value) - 1;
}
谢谢你的回答,但它非常非常非常基本,我更感兴趣的是如何管理这些+/-按钮,如何定制它们? – xamenrax 2013-03-25 12:54:28
@Nikita看到这个jquery插件:http://1stwebmagazine.com/stepper-jquery-number-input-plugin – karaxuna 2013-03-25 12:58:47
这种输入将非常困难,甚至_impossible_,风格。我建议使用经典的'type =“text”',在** JS **中添加两个'
- 1. Android自定义数字输入验证
- 2. 自定义输入数量
- 3. 自定义输入字段和自定义searchqueryset
- 4. 自定义输入字段WordPress后端
- 5. Woocommerce自定义用户输入字段
- 6. Javascript自定义输入字段
- 7. 输入字段和自定义图标
- 8. 自定义输入字段以打开数字链接
- 9. Spinners - 自定义输入
- 10. Zend_Form_decorator自定义类输入
- 11. 自定义输入样式
- 12. 自定义文件输入
- 13. 密码输入自定义
- 14. 自定义地址输入
- 15. 自定义范围输入
- 16. JOptionPane自定义输入
- 17. :自定义电台输入
- 18. 输入字段与自定义输入法
- 19. 自定义字段输出
- 20. condor:自定义传输输入文件
- 21. Java的自定义输入输出流
- 22. HTML输入数字自定义验证消息
- 23. 数据已输入后创建自定义字段
- 24. ASP.NET MVC4中的自定义数据输入字段
- 25. 用户自定义字符串数组大小/输入Java
- 26. 输入接受数字只有自定义指令
- 27. 角4:如何定义不允许数字的输入自定义验证器?
- 28. 将输入文本定义为闪存中的数字输入
- 29. 自定义数字
- 30. 导入自定义字体
寻找一些jquery插件还有很多jquery插件比这个设计更有吸引力 – 2013-03-25 12:55:50