> php教程 > PHP开发 > 은행 카드 번호의 4자리마다 자동으로 공백을 삽입하는 jquery 기반 구현 코드

은행 카드 번호의 4자리마다 자동으로 공백을 삽입하는 jquery 기반 구현 코드

高洛峰
풀어 주다: 2016-12-05 16:45:24
원래의
1577명이 탐색했습니다.

难点不是插入空格,而是修正光标的位置,这个只支持IE9+、chrome浏览器

注意:这个使用了jquery框架

核心代码

$(function() {
 
      $('#kahao').on('keyup', function(e) {
       //只对输入数字时进行处理
        if((e.which >= 48 && e.which <= 57) ||
            (e.which >= 96 && e.which <= 105 )){
          //获取当前光标的位置
          var caret = this.selectionStart
          //获取当前的value
          var value = this.value
          //从左边沿到坐标之间的空格数
          var sp = (value.slice(0, caret).match(/\s/g) || []).length
          //去掉所有空格
          var nospace = value.replace(/\s/g, &#39;&#39;)
          //重新插入空格
          var curVal = this.value = nospace.replace(/(\d{4})/g, "$1 ").trim()
          //从左边沿到原坐标之间的空格数
          var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length
         //修正光标位置
         this.selectionEnd = this.selectionStart = caret + curSp - sp
         
        }
      })
    })
로그인 후 복사

完整代码:已经测试



 

  
  银行卡号4位空格
  

<script> $(function() { $(&amp;#39;#kahao&amp;#39;).on(&amp;#39;keyup&amp;#39;, function(e) { //只对输入数字时进行处理 if((e.which &gt;= 48 &amp;&amp; e.which &lt;= 57) || (e.which &gt;= 96 &amp;&amp; e.which &lt;= 105 )){ //获取当前光标的位置 var caret = this.selectionStart //获取当前的value var value = this.value //从左边沿到坐标之间的空格数 var sp = (value.slice(0, caret).match(/\s/g) || []).length //去掉所有空格 var nospace = value.replace(/\s/g, &amp;#39;&amp;#39;) //重新插入空格 var curVal = this.value = nospace.replace(/(\d{4})/g, &quot;$1 &quot;).trim() //从左边沿到原坐标之间的空格数 var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length //修正光标位置 this.selectionEnd = this.selectionStart = caret + curSp - sp } }) }) </script>
로그인 후 복사

经过测试确实很好用,里面用到了很多的正则

\s 匹配任何空白字符,包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿