前端常用功能模块随记之一（input 限制输入数字及小数点后2两位、input 只允许输入正整数、右侧带图标的 input 框）

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.