格式化提示电话号码

最新推荐文章于 2024-05-24 11:15:29 发布

转载最新推荐文章于 2024-05-24 11:15:29 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jinbiao/archive/2012/01/12/2320830.html

本文介绍了一种使用JavaScript实现的电话号码格式化方法。当用户在输入框中输入电话号码时，该方法能够实时地将号码按特定格式进行分段显示，如（XXX）XXXX-XXXX，以此提高用户体验。

 <style>
 *{margin:0;padding:0;}
 .pr5{padding-right:5px;}
 .labelbox{position:relative;width:200px;height:30px;margin:20px auto;display:block} 
 .showvalue{width:200px;height:20px;color:#333;font-size:12px;position:absolute;top:22px;left:0;}
 .showvalue_big{width:200px;height:20px;color:#f60;border:1px solid #f60;font-size:16px;position:absolute;top:0px;left:0;display:none;font-weight:700;}
 </style>

  <label class="labelbox">
  <p class="showvalue_big"></p>
  <input type="" class="showvalue" maxlength="11"></label>
  <style>
  .toggle{color:#000;background:#0C3;width:200px;height:20px;}
  </style>
  <textarea class="toggle">这个是一行文字如果选择了就这样吧</textarea>
  <script>
  $(document).ready(function(){
var $infobig=$('.showvalue_big');
          $('.showvalue').focus(function(){        
            $infobig.stop(true,true).slideDown();     
            $('.showvalue').keyup(function(){            
var strvar=$('.showvalue').val();
var str="";
                    str+='\<span class="pr5">'+strvar.substr(0,3)+'\</span>';                             
                    str+='\<span class="pr5">'+strvar.substr(3,4)+'\</span>';                     
                    str+='\<span class="pr5">'+ strvar.substr(7,4)+'\</span>';        
                $infobig.html(str);

            })
        })
        $('.showvalue').blur(function(){
        $infobig.slideUp();     
        })

格式化提示电话号码

转载于:https://www.cnblogs.com/jinbiao/archive/2012/01/12/2320830.html