极客观点
项目管理
HarmonyOS
遇到这么个需求，如下图，当所需要的东西都不为空时，下一步按钮才可以点击，没有做过不知道怎么下手，求各路大神指点迷津，在此谢过。
当所要填的内容不为空时，按钮变成可点击状态如下图：
html5
给你个参考吧，写个函数来确认btton是否改变，每次input变化时调用，用双向绑定的框架就更简单了，提交的值全部放在一个数组里面，监听这个数组的变化，判断是否全部有值，进行button的改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.active{
background: orange;
}
</style>
</head>
<body>
<div class="box">
<input type="text">
<input type="text">
<input type="text">
<input type="file">
<button class="btn" disabled="disabled" onclick="aaa()">下一步</button>
</div>
<script>
var oBox = document.getElementsByClassName('box')[0];
var oIp = oBox.getElementsByTagName('input');
var btn = oBox.getElementsByTagName('button')[0];
[].slice.call(oIp).forEach(function(element) {
if(element.type!='file'){
element.oninput = function(){
btnclick();
}
}else{
element.onchange = function(){
btnclick();
}
});
function btnclick(){
var flag = true;
for(var i=0;i<oIp.length;i++){
if(oIp[i].type!='file'){
if(!oIp[i].value){
flag = false;
}
}else{
if(!oIp[i].files[0]){
flag = false;
}
}
}
if(flag){
btn.disabled = false;
btn.classList.add('active');
}else{
btn.disabled = true;
btn.classList.remove('active');
}
}
</script>
</body>
</html>撰写回答
你尚未登录，登录后可以
- 和开发者交流问题的细节
- 关注并接收问题和回答的更新提醒
- 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
js 如何将Key属性相同的放在同一个数组？
{代码...} 说明：id和name是动态的，有可能后台返回的是age和school,不是固定id和name想要的结果是; {代码...}10 回答11.2k 阅读
vue项目如何在初始化之前跳转外部页面？
vue项目内有一个分享功能，但是这个分享出去的页面打开会非常慢，所以就想到了单独写了一套H5页面专门用于手机端打开，然后在这个vue项目的分享页面初始化函数里面加一个判断终端是否为移动端，如果是就再做一次跳转，到这个单独的H5页面上去，这样就不会去加载vue框架，打开速度会更快。以上是初始方案和预期。5 回答4.9k 阅读✓ 已解决
js如何控制移动端overflow:scroll容器滑动的最大速度？
{代码...} demo在这：[链接]在移动端滑动一下这个.box区域,稍微一用力就到头了，如果我想用js去控制他滑动的最大速度该怎么去处理？4 回答3.2k 阅读✓ 已解决
前端代码更新如何通知用户刷新页面？
前端代码更新如何通知用户刷新页面？2 回答2.8k 阅读✓ 已解决
H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓变成下载了？
H5页面 点击按钮使用window.open 打开并展示一个pdf，安卓手机变成下载了？需要在移动端也是预览怎么实现呢？ {代码...}3 回答1.5k 阅读✓ 已解决
为什么会出现CORS error？
先登录成功了。再次调用，就出现了CORS error在Login页调用这个接口就是正常的，换一个页面调用这个接口就出现了跨域问题。我把这段代码注释以后就正常了。3 回答2.4k 阅读✓ 已解决
请问一下，如何理解reduce函数呢？
但是reduce是减少的意思，请问如何形象化地理解reduce呢？ 我们可不可以理解：把参数2一个一个地带入到参数1（函数）中执行，这样也就慢慢减少呢？3 回答2.2k 阅读✓ 已解决
输入框有输入事件 比如
oninput事件 可以在输入事件的时候监听输入框是否有值 也就是有没有value然后改变button状态