前端开发提交按钮根据input的value来改变状态

前端开发工程流程
前端开发中支付开发流程
完整的前端开发流程

做一个项目的过程中,有一个提现功能。功能需求:当input的value为空时,提交按钮增加disabled属性,不能点击;当input中的value不为空时,提交按钮转变为可点击状态。

刚刚开始,我考虑用blur来实现,但是发现在input中输入数字之后,必须点击页面空白的地方,按钮才会改变状态,所以在第一时间就弃用了。然后就是想到onchange方法,但是在发布之后,发现输入数字之后onchange方法不响应,于是也放弃了。后来找到了onpropertychange方法,并且用这个顺利的实现了这个功能。下面贴出简单代码:
html 代码

<section class=”cash_bd”>
    <header>提现到微信账户</header>
    <input
        type=”text”
        id=”payIn”
        placeholder=”本次最多可转出378元”
        style=”color: #999;font-size: 12px;”
    />
    <span>金额</span> <button id=”payInBtn” disabled>确认转出</button>
</section>

javascript 代码

$(‘#payIn’).bind(‘input propertychange’, function() {
    var val = $(this).val()
    if (val == ”) {
        $(‘#payInBtn’).attr({ disabled: ‘disabled’ })
    } else {
        $(‘#payInBtn’).removeAttr(‘disabled’)
    }
})

这个onpropertychange方法是IE专属,所以我们也必须再找一个其他浏览器通用的,即上面的input。

web前端开发的整个流程
前端开发详细流程图
前端到后端开发流程
赞(0)
前端开发者 » 前端开发提交按钮根据input的value来改变状态
64K

评论 抢沙发

评论前必须登录!