在Javascript中启用和禁用提交按钮

Submit Button enable and disable in Javascript

本文关键字：提交 按钮 Javascript 启用      更新时间：2023-09-26

我想使用JavaScript创建一个带有文本框和提交按钮的表单。该按钮应启用只有当我在文本框中输入一个总10位数的电话号码。

非常简单的解决方案:https://jsfiddle.net/tkx3dcna/

HTML 

<input id="phone" type="text">
<button id="btn" disabled>Send</button>

JS 

var btn=document.getElementById("btn");
var phone=document.getElementById("phone");
phone.onkeyup=function(){
    btn.disabled=!(phone.value.length===10);
};

给你，虽然Madara是对的，但你应该自己试试这些东西，不是吗?

var num = document.querySelector("input[type='number']"),
  submit = document.querySelector("input[type='submit']");
num.onkeyup = function(event) {
  var val = this.value + '';
  if (val.length === 10) {
    submit.disabled = false;
  } else {
    submit.disabled = true;
  }
};
// Use below method instead, submit button shows immediately after the numbers are a length of 10
/*
function areYouReady() {
  var val = num.value + '';
  if (val.length === 10) {
    isReady = true;
    submit.disabled = false;
  } else {
    isReady = true;
    submit.disabled = true;
  }
  requestAnimationFrame( areYouReady );
}
areYouReady();
*/
<form>
  <input type="number" maxlength="10" required>
  <input type="submit" onsubmit="" disabled="true">
</form>

相关文章：