一旦達到另一個元素的像素寬度，如何防止輸入到文本區域？

Question

我有一個textarea （ #stamptext ），一個預覽區域（ #stamptextbox ）和#stamptextbox稱為#previewtext的span 。

當#previewtext達到#stamptext的像素寬度時，我需要防止進一步輸入#stamptextbox 。

我無法限制字符數。

我知道如何測試條件（請參見下面的代碼），但不知道如何防止進一步進入textarea 。

任何輸入，不勝感激。

  $('#stamptext').keyup(function(e){
        if($('#previewtext').width() >= $("#stamptextbox").width()){
            [what do I do here!?]
        }
   });

編輯一旦達到限制，用戶需要能夠從框中刪除文本，而不能添加更多內容。 我應該說清楚了。

Answer 1

給它一個disabled屬性，設置為true ：

$(this).prop('disabled', true);

這是否會阻止用戶刪除自己添加的內容？ 誠然，我沒有清楚這是必要的。

在這種情況下，您可以給它一個maxlength屬性，該屬性設置為文本框中當前保留的字符數：

$(this).attr('maxlength', $(this).val().length);

請注意， if不滿足if語句的條件， if需要使用removeAttr('maxlength')來擺脫maxlength屬性。

演示

該演示顯然不執行您的代碼所執行的操作，但是它演示了如何防止用戶在滿足特定條件后在textarea鍵入更多文本。 請注意，我使用了input事件而不是keyup事件，因為這可以處理更多的文本輸入情況（即，通過上下文菜單粘貼文本不會觸發keyup ）。

在您的代碼中， maxlength值將動態確定，但是在這里，我對字符數（ 10 ）使用固定長度檢查。

 $(function() { $('textarea').on('input', function() { var len = $(this).val().length; if (len == 10) $(this).attr('maxlength', len); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <textarea></textarea> 

Answer 2

使用event.preventDefault(); ， 像這樣：

$('#stamp-text').keydown(function(e){
    var code = e.keyCode || e.which;
    if($('#previewtext').width() >= $("#stamptextbox").width() && code != 8
        && code != 46) //delete or backspace
        e.preventDefault();
});