前端根据文本框输入字符串长度实时控制按钮可用或是不可用

最新推荐文章于 2022-04-20 18:26:02 发布

剑舞九霄

最新推荐文章于 2022-04-20 18:26:02 发布

阅读量879

点赞数

分类专栏：前端小知识文章标签：前端

本文链接：https://blog.csdn.net/u011370617/article/details/50235799

版权

前端小知识专栏收录该内容

2 篇文章 0 订阅

订阅专栏

比如如下的有个需求：

要求如下：当输入的兑换码的长度超过1时，下面的兑换按钮有效，可点击，否则无效，不可点击

如下代码是整个div：
<div class="content">
<div class="content_top">
<input type="text" class="form-control" id="duihuanma" placeholder="请输入兑换码" maxlength="30">
<s></s>

</div>
<div class="content_bottom_btn">
<button class="btn" id="exchange_button" disabled="true">兑  换</button>
</div>
</div>

js控制有那种方法：

方法1：

<script type="text/javascript">
//监听输入框
$('#duihuanma').bind('input propertychange', function() {
// 兑换码检验
var success = $("#duihuanma").val();
if(success.length<2){
$(".btn").css('background','#dcdcdc');
$('.btn').css('color','#fff');
$(".footer_alert_fail").css("display" ," ");
document.getElementById("exchange_button").disabled = true;

}else {
$('.btn').css('background','#ed3f00');
$('.btn').css('color','#fff');
$(".footer_alert_fail").css("display" ,"none ");
document.getElementById("exchange_button").disabled = false;

};
});
</script>

方法二：
<script type="text/javascript">
$("#duihuanma").on("input",function(){//当兑换码开始输入时触发的事件
var conversionCode = $('#duihuanma').val();

if(conversionCode.length<2){
$(".btn").css('background','#dcdcdc');
$('.btn').css('color','#fff');
$(".footer_alert_fail").css("display" ," ");

document.getElementById("exchange_button").disabled = false;

}else{
$('.btn').css('background','#ed3f00');
$('.btn').css('color','#fff');
$(".footer_alert_fail").css("display" ,"none ");
document.getElementById("exchange_button").disabled = true;
}

});
</script>

前端根据文本框输入字符串长度实时控制按钮可用或是不可用