vant的输入框组件field,默认的type类型只支持tel、digit、number、textarea、password等,实际还有其他场景需要自定义。比如:有一个英文名输入框,只能支持字母和空格,且输入小写字母,自动变成大写,可以这样做。

template:

<van-field
    label="英文名"
    v-model="enName"
    type="text"
    input-align="right"
    :formatter="nameFormat"
    @blur="enNameBlur"
/>

methods:

function nameFormat(res) {
    res = res.replace(/[^A-Z]/g, ele => {
        if (/[a-z]/.test(ele)) {
            return ele.toUpperCace()
        } else if (/ /.test(ele)) {
            return ‘ ‘
        } else {
            return ‘’
        }
    })
    //中间只能有一个空格
    res = res.replace(/ +/,’ ‘)
    //解决苹果中文特殊空格
    res = res.replace(String.formCharCode(8198),’’)
    return res
}

`

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐