input怎么限制用户输入一些字符-优快云博客

本文介绍了如何使用JavaScript动态限制输入框内的字符长度及类型，通过自定义函数实现输入验证，确保输入内容符合预设规则。适用于前端开发中需要进行数据验证的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

思路

运用http://my.oschina.net/lirongfei/blog/507823这里面介绍的兼容性input事件

动态获取当前输入的字符，判断是否符合要求，如果不符合，就用旧的正确值填充（这个旧的正确值，是你在正确的时候保存的）

难点就是动态获取当前输入的字符

下面是实现方法

get_focus_position:function(input){
    var position=0;
    if(typeof input.selectionStart=="undefined"){
         input.focus();
          var sel=document.selection.createRange();
                sel.moveStart("character",-input.value.length);
                position=sel.text.length;
    }else{
         position=input.selectionStart;
    }
/*
对于chrome来说，如果输入的时候用的是输入法，那么获取的一直是零，这是就取value的长度
*/
    return position==0?input.value.length:position;

}

limit_input:function(elem,opt){
    elem.setAttribute("history_value",elem.value);
    utils.bindInput(elem,function(event){
        var value=elem.value,isOk=true;
        if(typeof opt.length!="undefined"){
            if(elem.value.length>opt.length){
                isOk=false;
                opt.error&&opt.error("length");
            }
        }
        if(typeof opt.char!="undefined"){
            var position=utils.get_focus_position(elem);
            var newValue=value.charAt(position-1);
            if(opt.char(newValue)){//不能输入的元素
                isOk=false;
                opt.error&&opt.error("char");
            }
        }
        if(isOk){
            elem.setAttribute("history_value",elem.value);
            opt.success&&opt.success(value,position,newValue);
        }else{
            elem.value=elem.getAttribute("history_value");
        }
    });
}

转载于:https://my.oschina.net/lirongfei/blog/507825