我正在使用 javascript 检查输入。如果输入太长,它会写入,并且还会禁用提交按钮。问题是,如果第一个输入禁用按钮并且我开始在第二个输入中写入,它会覆盖第一个输入,并且按钮将被启用,直到我也达到第二个输入的最大长度。 以下是我的两个输入:
<input class="form-control" id="name" name="name" type="text" required="required" onkeyup="checkLength1()">
<p id="nev"><span style="color: red;">max 5 characters</span></p>
<input class="form-control" id="job" name="job" type="text" required="required" onkeyup="checkLength2()">
<p id="munka"><span style="color: red;">max 5</span></p>
以及使
类可见/不可见并将按钮设置为启用/禁用的 javascript:
<script>
document.getElementById('nev').setAttribute('style', 'display: none');
document.getElementById('munka').setAttribute('style', 'display: none');
</script>
<script>
var checkLength1 = function () {
if (document.getElementById('name').value.length > 5) {
document.getElementById('nev').setAttribute('style', 'display: block');
document.getElementById("send").disabled = true;
} else {
document.getElementById('nev').setAttribute('style', 'display: none');
document.getElementById("send").disabled = false;
}
}
</script>
<script>
var checkLength2 = function () {
if (document.getElementById('job').value.length > 5) {
document.getElementById('munka').setAttribute('style', 'display: block');
document.getElementById("send").disabled = true;
} else {
document.getElementById('munka').setAttribute('style', 'display: none');
document.getElementById("send").disabled = false;
}
}
</script>
和按钮:
<button type="submit" class="btn btn-primary btn-xl" id="send">Send</button>
编辑: 完整代码:
<script>
document.getElementById('nev').setAttribute('style', 'display: none');
document.getElementById('munka').setAttribute('style', 'display: none');
document.getElementById('mail').setAttribute('style', 'display: none');
document.getElementById('telo').setAttribute('style', 'display: none');
document.getElementById('telo2').setAttribute('style', 'display: none');
document.getElementById('cim').setAttribute('style', 'display: none');
document.getElementById('leiras').setAttribute('style', 'display: none');
document.getElementById('iranyitoszam').setAttribute('style', 'display: none');
var checkLength = function() {
var name = document.getElementById('name').value;
var job = document.getElementById('job').value;
var job = document.getElementById('email').value;
var job = document.getElementById('phone').value;
var job = document.getElementById('phone2').value;
var job = document.getElementById('address').value;
var job = document.getElementById('description').value;
var job = document.getElementById('zipcode').value;
document.getElementById("send").disabled = name.length > 5 || job.length > 5 || email.length > 5 || phone.length > 5 || phone2.length > 5 || address.length > 5 || description.length > 5 || zipcode.length > 5;
document.getElementById('nev')
.setAttribute('style', name.length > 5 ? 'display: block' : 'display: none');
document.getElementById('munka')
.setAttribute('style', job.length > 5 ? 'display: block' : 'display: none');
document.getElementById('mail')
.setAttribute('style', email.length > 5 ? 'display: block' : 'display: none');
document.getElementById('telo')
.setAttribute('style', phone.length > 5 ? 'display: block' : 'display: none');
document.getElementById('telo2')
.setAttribute('style', phone2.length > 5 ? 'display: block' : 'display: none');
document.getElementById('cim')
.setAttribute('style', address.length > 5 ? 'display: block' : 'display: none');
document.getElementById('leiras')
.setAttribute('style', description.length > 5 ? 'display: block' : 'display: none');
document.getElementById('iranyitoszam')
.setAttribute('style', zipcode.length > 5 ? 'display: block' : 'display: none');
}
</script>
<input class="form-control" id="name" name="name" type="text" required="required" onkeyup="checkLength()">
<p id="nev"><span style="color: red;">A név maximum 50 karakterből állhat!</span></p>
<input class="form-control" id="job" name="job" type="text" required="required" onkeyup="checkLength()">
<p id="munka"><span style="color: red;">A foglalkozás megnevezése maximum 50 karakterből állhat!</span></p>
<input class="form-control" id="phone" name="phone" type="text" required="required" onkeyup="checkLength()">
<p id="telo"><span style="color: red;">A telefonszám maximum 20 karakterből állhat!</span></p>
<input class="form-control" id="phone2" name="phone2" type="text" onkeyup="checkLength()">
<p id="telo2"><span style="color: red;">A másodlagos telefonszám maximum 20 karakterből állhat!</span></p>
<input class="form-control" id="email" name="email" type="email" onkeyup="checkLength()">
<p id="mail"><span style="color: red;">Az Email cím maximum 50 karakterből állhat!</span></p>
<input class="form-control" id="zipcode" name="zipcode" type="text" onkeyup="checkLength()">
<p id="iranyitoszam"><span style="color: red;">Az irányítószám maximum 4 karakterből állhat!</span></p>
<input class="form-control" id="address" name="address" type="text" onkeyup="checkLength()">
<p id="cim"><span style="color: red;">A cím maximum 50 karakterből állhat!</span></p>
<textarea class="form-control" id="description" name="description" rows="5" required="required" onkeyup="checkLength()"></textarea>
<p id="leiras"><span style="color: red;">A leírás maximum 500 karakterből állhat!</span></p>
最佳答案
您可以更新两个输入上的 onkeyup
以使用名为 checkLength()
的方法并使用几行代码:
document.getElementById('nev').setAttribute('style', 'display: none');
document.getElementById('munka').setAttribute('style', 'display: none');
var checkLength = function() {
var name = document.getElementById('name').value;
var job = document.getElementById('job').value;
document.getElementById("send").disabled = name.length > 5 || job.length > 5;
document.getElementById('nev').setAttribute('style', name.length > 5 ? 'display: block' : 'display: none');
document.getElementById('munka').setAttribute('style', job.length > 5 ? 'display: block' : 'display: none');
}
演示:
document.getElementById('nev').setAttribute('style', 'display: none');
document.getElementById('munka').setAttribute('style', 'display: none');
var checkLength = function() {
var name = document.getElementById('name').value;
var job = document.getElementById('job').value;
document.getElementById("send").disabled = name.length > 5 || job.length > 5;
document.getElementById('nev')
.setAttribute('style', name.length > 5 ? 'display: block' : 'display: none');
document.getElementById('munka')
.setAttribute('style', job.length > 5 ? 'display: block' : 'display: none');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm form-group">
<input class="form-control" id="name" name="name" type="text" required="required" onkeyup="checkLength()">
<p id="nev"><span style="color: red;">max 5 characters</span></p>
</div>
<div class="col-sm form-group">
<input class="form-control" id="job" name="job" type="text" required="required" onkeyup="checkLength()">
<p id="munka"><span style="color: red;">max 5</span></p>
</div>
<div class="col-sm form-group">
<button type="button" class="btn btn-primary btn-xl" id="send">Send</button>
</div>
</div>
</div>
编辑:
您还必须重命名变量:
var name = document.getElementById('name').value;
var job = document.getElementById('job').value;
var job = document.getElementById('email').value;
var job = document.getElementById('phone').value;
var job = document.getElementById('phone2').value;
var job = document.getElementById('address').value;
var job = document.getElementById('description').value;
var job = document.getElementById('zipcode').value;
对此:
var name = document.getElementById('name').value;
var job = document.getElementById('job').value;
var email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;
var phone2 = document.getElementById('phone2').value;
var address = document.getElementById('address').value;
var description = document.getElementById('description').value;
var zipcode = document.getElementById('zipcode').value;
关于javascript - 禁用具有多个输入的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60381886/