1. input 限制输入数字及小数点后2两位
<input type="number" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">
正则表达式: /\d+(.\d{0,2})?/
如果想调整小数点后保留的位数,可修改正则表达式中的数字2
。
2. input 只允许输入正整数
<input type="number" onkeyup="value=integer(this.value)"> <script> function integer(value) { value = value.match(/\d+/) ? value.match(/\d+/)[0] : ''; // 匹配数字,非数字替换为'' // 判断第一位是否为0,若为0则删除 if (value[0] == 0) { value = value.substr(1) console.log(value) } return value; } </script>
3. 右侧带图标的 input 框
<div class="icon-right"> <input class="form-control" /> </div>
// css .icon-right{ position: relative; display: flex; align-items: center; cursor: pointer; } .icon-right::after{ content: ''; position: absolute; right: 10px; display: block; height: 32px; width: 32px; background-image: url('/assets/images/calendar.png'); background-repeat: no-repeat; }
因为 input 标签添加伪类无法生效。
原因如下:
作为DOM元素,伪元素都是在容器内进行渲染的。input无法容纳其他元素,因此它不支持伪元素。
所以这里添加一个 div 包裹 input.