<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>

我希望這有助於。