Javascript 禁用输入字符计数限制时提交

我的解决方案可以工作90%，当用户键入的字符超过允许的字符数时，“提交”按钮将禁用，但一旦用户单击进入下一个输入，该按钮将再次启用

在底部，我试图添加一个if语句，但似乎没有什么不同。非常感谢您的帮助。还有很多代码被重复用于三个输入，以限制字符，因为数量不同，有没有更好的方法来写这个

function characterLimit() {

var headingMax       = 20;
var ribbonMax        = 15;
var descriptionMax   = 120;
var dh               = $('.heading-max');
var dr               = $('.ribbon-max');
var dd               = $('.description-max');
var btnSubmit        = $('#submitBtn');
var inputTitle       = $('#createDealTitle');
var inputRibbon      = $('#createDealRibbon');
var inputDescription = $('#createDealDescription');

dh.html(headingMax);
dr.html(ribbonMax);
dd.html(descriptionMax);

inputTitle.keydown(function(){
  var textLength    = $(this).val().length;
  var textRemaining = headingMax - textLength;

  dh.html(textRemaining);

  if (textLength > headingMax) {
    dh.addClass('error-text');
    $(this).addClass('error-input');
    btnSubmit.attr('disabled', true).addClass('disabled');
  }else {
    dh.removeClass('error-text');
    $(this).removeClass('error-input');
    btnSubmit.attr('disabled', false).removeClass('disabled');
  }

});

inputRibbon.keydown(function(){
  var textLength    = $(this).val().length;
  var textRemaining = ribbonMax - textLength;

  dr.html(textRemaining);

  if ($(this).val().length > ribbonMax) {
    dr.addClass('error-text');
    $(this).addClass('error-input');
    btnSubmit.attr('disabled', true).addClass('disabled');


  }else {
    dr.removeClass('error-text');
    $(this).removeClass('error-input');
    btnSubmit.attr('disabled', false).removeClass('disabled');
  }

});

inputDescription.keydown(function(){
  var textLength    = $(this).val().length;
  var textRemaining = descriptionMax - textLength;

  dd.html(textRemaining);

  if ($(this).val().length > descriptionMax) {
    dd.addClass('error-text');
    $(this).addClass('error-input');
    btnSubmit.attr('disabled', true).addClass('disabled');
  }else {
    dd.removeClass('error-text');
    $(this).removeClass('error-input');
    btnSubmit.attr('disabled', false).removeClass('disabled');
  }

});

if (inputTitle.val().length > headingMax || inputRibbon.val().length  > ribbonMax || inputDescription.val().length > descriptionMax) {
  btnSubmit.attr('disabled', true).addClass('disabled');
}else {
  btnSubmit.attr('disabled', false).removeClass('disabled');

}

}

characterLimit();

---

您需要修改禁用提交按钮的条件，以包含表示其他文本输入当前禁用状态的

布尔值

否则，如果您开始键入另一个未超过字符长度的文本输入，请单击“提交”按钮并重新启用


解决方案：

如果其他输入超过长度，则条件应自动失效：

var exceededTitle = false;
var exceededRibbon = false;
var exceededDescription = false;

// Then inside keydown:

inputRibbon.keydown(function(){
  ...
  if(exceededTitle || exceededRibbon || exceededDescription)
    // Disable submit
  ...

您从三个位置控制提交按钮
inputTitle.keydown（）
，
inputDescription.keydown（）
和
inputRibbon.keydown（）
。这意味着每次您想要启用submit按钮时，您只需检查三个条件中的一个。在启用它之前，应该检查所有三个侦听器中每个if-else块中的所有三个条件
 您只需将事件绑定到长度检查+我已将其修改为
输入
事件，而不是
按键
-更可靠


逻辑的问题在于，它只检查上次输入到的输入。如果该长度再次变为有效长度，则无论其他输入的状态如何，它都会自动启用提交

但是，您的代码存在一些问题。使用
keydown
表示计数器忽略您键入的第一个字符。尝试使用
输入
。此外，您的代码也可能会因每个控件重复自身而干涸。您可以混合使用类和
数据
属性，使单个事件处理程序适用于所有元素。试试这个：


函数字符限制（）{
$（'.char limit'）。在（函数（）之后{
返回“”+$（this）.data（'charlimit'）+”个剩余字符；
}).on（'input'，function（）{
var$el=$（本）；
风险限额=$el.data（'charlimit'）；
剩余风险=限制-this.value.length；
$el.next（'p'）。查找（'max'）。文本（剩余）；
$el.toggleClass（'无效'，剩余<0）；
$（'#submitBtn'）.prop（'disabled'，$（'.char limit.invalid'）。长度！=0）；
});
}
characterLimit（）
ul{
列表样式：无；
保证金：0；
填充：0；
}
ulli{
边缘底部：10px；
}











我更新了你的小提琴：

您的主要错误是，所有输入字段的最后一次检查超出了范围


函数字符限制（）{
var headingMax=20；
var ribbonMax=15；
var descriptionMax=120；
var dh=$（'标题最大值'）；
var dr=$（'.ribbon max'）；
变量dd=$（'.description max'）；
var btnSubmit=$（“#submitBtn”）；
变量inputTitle=$（'createDealTitle'）；
var inputRibbon=$（“#createDealRibbon”）；
变量inputDescription=$（“#createDealDescription”）；
var input1Isvalid=true；
var input2Isvalid=true；
var input3Isvalid=true；
html(headingMax),；
dr.html（ribbonMax）；
dd.html（descriptionMax）；
//标题输入
inputTitle.keydown（函数（）{
var textLength=$（this）.val（）.length；
var textlaining=headingMax-textLength；
html(剩余文本);；
如果（文本长度>标题最大值）{
dh.addClass（'error-text'）；
$（this.addClass（'error-input'）；
input1Isvalid=false；
}否则{
dh.removeClass（'error-text'）；
$（this.removeClass（'error-input'）；
input1Isvalid=true；
}
checkInput（）
});
//功能区输入
inputRibbon.keydown（函数（）{
var textLength=$（this）.val（）.length；
var textlaining=ribbonMax-textLength；
html博士（剩余文本）；
if（$（this）.val（）.length>ribbonMax）{
dr.addClass（“错误文本”）；
$（this.addClass（'error-input'）；
input2Isvalid=false；
}否则{
dr.removeClass（“错误文本”）；
$（this.removeClass（'error-input'）；
input2Isvalid=true；
}
checkInput（）
});
//描述输入
inputDescription.keydown（函数（）{
var textLength=$（this）.val（）.length；
var textlaining=descriptionMax-textLength；
dd.html（剩余文本）；
if（$（this）.val（）.length>descriptionMax）{
dd.addClass（“错误文本”）；
$（this.addClass（'error-input'）；
btnSubmit.attr（'disabled'，true）.addClass（'disabled'）；
input3Isvalid=false；
}否则{
dd.removeClass（'error-text'）；
$（this.removeClass（'error-input'）；
btnSubmit.attr（'disabled'，false）.removeClass（'disabled'）；
input3Isvalid=true；
}
checkInput（）
});
函数checkInput（）{
//如果任何输入字符的最大长度超过，则禁用提交
如果（！input1Isvalid | | |！input2Isvalid | |！Input3有效）
btnSubmit.attr（'disabled'，true）.addClass（'disabled'）；
其他的
btnSubmit.attr（'disabled'，false）.removeClass（'disabled'）；
}
}
characterLimit（）
ul{
列表样式：无；
保证金：0；
填充：0；
}
ulli{
边缘底部：10px；
}



剩余字符



剩余字符



剩余字符





尝试以下操作：

如果页面/表单上存在错误类，则禁用或启用该按钮：

function characterLimit() {
  var headingMax = 20;
  var ribbonMax = 15;
  var descriptionMax = 120;
  var dh = $('.heading-max');
  var dr = $('.ribbon-max');
  var dd = $('.description-max');
  var btnSubmit = $('#submitBtn');
  var input = $('#createDealTitle,#createDealRibbon,#createDealDescription');

  dh.html(headingMax);
  dr.html(ribbonMax);
  dd.html(descriptionMax);

  // Title Input

  input.keydown(function() {
    var textLength = $(this).val().length;
    var dh = $(this).next().find('span');
    var max = dh.text();
    var textRemaining = headingMax - textLength;

    dh.html(textRemaining);

    if (textLength > headingMax) {
      dh.addClass('error-text');
      $(this).addClass('error-input');
      btnSubmit.attr('disabled', true).addClass('disabled');
    } else {
      dh.removeClass('error-text');
      $(this).removeClass('error-input');
      btnSubmit.attr('disabled', false).removeClass('disabled');
    }
    if ($('.error-input').length) {
      btnSubmit.attr('disabled', true).addClass('disabled');//disable the input if a error exist
    } else {
      btnSubmit.attr('disabled', false).removeClass('disabled');//enable the button if there are no errors on the page
    }
  });       

}

characterLimit();

演示：
您可以使用一个布尔变量来决定按钮是否应该被激活
function characterLimit() {
  var headingMax = 20;
  var ribbonMax = 15;
  var descriptionMax = 120;
  var dh = $('.heading-max');
  var dr = $('.ribbon-max');
  var dd = $('.description-max');
  var btnSubmit = $('#submitBtn');
  var input = $('#createDealTitle,#createDealRibbon,#createDealDescription');

  dh.html(headingMax);
  dr.html(ribbonMax);
  dd.html(descriptionMax);

  // Title Input

  input.keydown(function() {
    var textLength = $(this).val().length;
    var dh = $(this).next().find('span');
    var max = dh.text();
    var textRemaining = headingMax - textLength;

    dh.html(textRemaining);

    if (textLength > headingMax) {
      dh.addClass('error-text');
      $(this).addClass('error-input');
      btnSubmit.attr('disabled', true).addClass('disabled');
    } else {
      dh.removeClass('error-text');
      $(this).removeClass('error-input');
      btnSubmit.attr('disabled', false).removeClass('disabled');
    }
    if ($('.error-input').length) {
      btnSubmit.attr('disabled', true).addClass('disabled');//disable the input if a error exist
    } else {
      btnSubmit.attr('disabled', false).removeClass('disabled');//enable the button if there are no errors on the page
    }
  });       

}

characterLimit();

var buttonEnabled = false;

if (textLength > headingMax) {

  buttonEnabled = false;
  toggleButtonEnabled(buttonEnabled);

} else {

  buttonEnabled = true;
  toggleButtonEnabled(buttonEnabled);
}

function toggleButtonEnabled(isEnabled){
    btnSubmit.attr('disabled', isEnabled);
    if(isEnabled){
        btnSubmit.removeClass('disabled');
    }else{
        btnSubmit.addClass('disabled');
    }
}