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

最新推荐文章于 2025-06-25 17:00:00 发布

阿狸狸阿狸狸呀

最新推荐文章于 2025-06-25 17:00:00 发布

阅读量746

点赞数

CC 4.0 BY-SA版权

文章标签：联动文字换url

本文链接：https://blog.youkuaiyun.com/qq_25236657/article/details/80135372

本文介绍了一个使用JavaScript实现的两个输入框之间的联动效果及字数限制提醒功能。当用户在一个输入框中输入文字时，另一个输入框会自动进行相应操作如复制或转换内容，并实时更新字数计数。

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

要求：一个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>

 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");
                }
            }