填充输入时的javascript自动格式

时间:2018-04-09 17:19:06

标签: javascript jquery html regex

我使用过这样的输入:

<input type="text" onkeypress="maskDexxtz(this,maskCPF)" maxlength='14'  title="<?php echo $this->__('Tax/VAT number') ?>"/>

我想在客户输入时格式化输入:xxx.xxx.xxx-xx 我的js代码:

<script type="text/javascript">
    function maskCPF(v) {
    v = v.replace(/\D/g, "");
    v = v.replace(/(\d{3})|(\.{1}d{3})/g, "$1.$2");
    return v;
}

function maskDexxtz(o, f) {
    v_obj = o
    v_fun = f
    setTimeout('mask()', 1)
}

function mask() {
    v_obj.value = v_fun(v_obj.value)
}
</script>

但是我只是将其设为xxx.xxx.xxx但无法捕获最后两个密钥-xx。 Anywho可以帮助我吗?

1 个答案:

答案 0 :(得分:1)

这是一个工作版本。我认为有一种方法可以用正则表达式替换。

&#13;
&#13;
$('input').on('keypress', (e, el) => {
    mask(e.currentTarget);
})

function mask(el) {
  timeout = setTimeout(() => {
    el.value = el.value.replace(/\D/g, "");
    let parts = el.value.match(/(\d{1,3})?(\d{1,3})?(\d{1,3})?(\d{1,2})?/);
    el.value = '';
    for(let i = 1; i <= 4; i++) {
      if(parts[i] !== undefined) {
		    el.value += parts[i];
        if(parts[i+1] !== undefined) {
	  	    el.value += i < 3 ? '.' : '';
  	  	  el.value += i == 3 ? '-' : '';
        }
      }
    }
  }, 1);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" onkeypress="" maxlength='14'  title="Tax/VAT number"/>
&#13;
&#13;
&#13;