<enter>停止按键时工作

Question

HTML：

<div class="col-md-10 col-sm-10 col-xs-10"> 
    {{ form_widget(experienceForm.description, { 
     'attr': { 
      'class': 'form-control field-max-length field-max-length field-line-length', 
      'rows': 6 
     } 
    })}} 
</div> 

handleChangeLineCounter = function() { 
    $('.field-line-length').keyup(function (e) { 
     e.preventDefault(); 
     var countLineNum = (this.value.match(/\n/g)||[]).length; 
     console.log(countLineNum); 
     checkEnterKey ($(this), 7, countLineNum); 
    }); 
} 

function checkEnterKey (getVarName, maxLine, countLine) { 
    var msg2 = maxLine - countLine +' lignes restantes,'; 
    if ((maxLine - countLine) === 1 || (maxLine - countLine) === 0) { 
     msg2 = maxLine - countLine +' ligne restante,'; 
    } 

    getVarName.keypress(function(e) { 
     if(e.which === 13) { 
      if ((maxLine - countLine) < 1) { 
       return false; 
      } 
      else if ((maxLine - countLine) > 0) { 
       return true; 
      } 
     } 
    }); 

    $('.counter-msg-2').remove(); 
    getVarName.after('<span class="counter-msg-2 m-r-5"><span class="counter_msg_2">' + msg2 + '</span></span>'); 
} 

从上面的代码，在功能checkEnterKey()，当（maxLine - countLine）为0时，我按下删除键或退格键，然后再按回车键，该键停止加工。 相反如果（maxLine - countLine）未达到0，我按删除键或退格键，然后再次按回车键，该键工作。 当我达到(maxLine - countLine) = 0时，如何使输入键工作？

Answer 1

没有与你的代码的一些问题：

1. 你每keyup为附加一个keypress新的事件处理程序，这是非常糟糕的。
2. 您正在使用来自JQuery的remove()和after()，它比仅放置元素和使用html()更简单。

以下解决方案有一些代码清理以及上述问题的补救措施。

// main function for attaching the event handlers to your element 
 
function handleChangeLineCounter(max) { 
 
    // initial value for the counter 
 
    $('.counter-msg-2').html(`${max} lignes restantes`); 
 

 
    // keypress event to handle only allowing the needed lines 
 
    // this code is not part of the keyup event because returning 
 
    // false here won't prevent the key from appearing 
 
    $('.field-line-length').keypress(function (e) { 
 
     let diff = max - ($(this).val().match(/\n/g) || []).length; 
 
     if (e.which === 13 && diff === 0) { 
 
      return false; 
 
     } 
 
    }); 
 

 
    // keyup event to handle the counter display 
 
    // this code is not part of the keypress event because the last 
 
    // input key would be missing 
 
    $('.field-line-length').keyup(function (e) { 
 
     let diff = max - ($(this).val().match(/\n/g) || []).length; 
 
     let msg = ((diff <= 1) ? `${diff} ligne restante` : `${diff} lignes restantes`); 
 
     $('.counter-msg-2').html(msg); 
 
    }); 
 
}; 
 
handleChangeLineCounter(7);

.field-line-length { 
 
    width: 500px; 
 
    height: 120px; 
 
    overflow-y: scroll; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea class="field-line-length"></textarea> 
 
<span class="counter-msg-2 m-r-5"> 
 
    <span class="counter_msg_2"></span> 
 
</span>

我希望这有助于。