2个input框联动并限制字数,文字转换url

要求:一个input输入内容的时候另外一个input框里的内容做相应的操作,复制/转化

html结构

<div class="form-group">
      <input type="text" class="form-control aaa" id="" name="name" placeholder="标题">
      <p data-len="70" class="limited">建议字数<b>0</b>/70</p>         
 </div>
<div class="form-group">
       <input type="text" class="form-control link" id="" name="link" placeholder="">
 </div>

js

 function siteVail(){
                $(".aaa").keyup(function(){
                var sParent = $(this).parents("li");                              
                var rex = ($(this).val().toLowerCase())
                                .replace(/\s+/g, '-')
                                .replace(/[^\w\-]+/g, '')
                                .replace(/\-\-+/g, '-')
                                .replace(/^-+/, '')
                                .replace(/-+$/, '');
                sParent.find(".link").val(rex);
                sParent.find("p b").text($(this).val().length);
                limitLen($(this),"p","p b");//限制字数并即时提醒
            })
        }
 function limitLen(_this,_p,_b){
                var sParent = _this.parents("li"); 
                var iLen = _this.val().length;
                var maxLen = sParent.find(_p).attr("data-len");
                if(iLen>maxLen){
                    sParent.find(_b).css("color","#dc3545");
                } else if(iLen<=maxLen){
                    sParent.find(_b).css("color","#333");
                }
            }


 
 


猜你喜欢

转载自blog.csdn.net/qq_25236657/article/details/80135372