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

本文介绍了一个使用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>

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



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值