使用JavaScript的Textarea字符計數

我正在爲表單的textarea字段實施字符計數。我有jQuery的當前計數，使用此代碼編寫我的性格聲明：使用JavaScript的Textarea字符計數

$("#textarea").keyup(function(){ 
    $("#count").text("Characters left: " + (500 - $(this).val().length)); 
});

不過，我想知道什麼是錯我的JavaScript：

var textarea = document.forms["form"].elements.textarea; 

textarea.addEventListener("keypress", textareaLengthCheck, false); 

function textareaLengthCheck(textarea) { 
var length = textarea.length; 
console.log(length); 
var charactersLeft = 500 - length; 
console.log(charactersLeft); 
count.innerHTML = "Characters left: " + charactersLeft; 
}

變量聲明和事件監聽器是在jQuery文檔準備功能。我不知道我在爲我的事件監聽器或函數做錯了什麼。

謝謝

來源

2012-12-29 Ilan Biala

變量textarea不存在於功能的範圍，你可以因爲你是使用jQuery

怎麼樣的一個插件參考，將其與this關鍵字

function textareaLengthCheck() { 
    var length = this.value.length; 
    var charactersLeft = 500 - length; 
    var count = document.getElementById('count'); 
    count.innerHTML = "Characters left: " + charactersLeft; 
}

來源

2012-12-29 22:46:39 wazz3r

此結果在控制檯和實際打印輸出中給出了未定義的內容，但其他內容不起作用。 –

對不起，我剛剛複製你的代碼。你需要使用'this.value'來獲取實際的內容。我已經更新了我的答案。 – wazz3r

代碼中的處理程序未傳遞涉及事件的元素。它傳遞了一個事件對象。因爲你用一個參數聲明瞭函數，所以隱藏了在外部範圍中聲明的變量。

的問題是在這裏：

function textareaLengthCheck(textarea) {

你已經包含了函數定義爲「文本區域」參數。這將是符號在函數內的含義，所以外部變量也稱爲「textarea」在該函數內不可見。

請注意，Firefox，Chrome和Safari均會報告<textarea>值的錯誤長度。那些瀏覽器報告textarea的長度，就好像所有明確的換行符（即用戶點擊「Enter」鍵的地方）一樣。事實上，當瀏覽器發佈其中包含<textarea>的表單時，所有顯式換行符都將轉換爲雙字符序列（回車符和換行符）。因此，如果爲了防止服務器溢出而施加最大長度，除非將換行符視爲兩個字符，否則它將不起作用。要做到這一點，你必須採取值的長度，然後在字符串中添加換行符的數量（使用正則表達式或其他）。

來源

2012-12-29 22:43:49 Pointy

@IlanBiala以及它看起來OK我:-)但是我編輯它添加的具體問題。 – Pointy

沒有通過...這是什麼意思？ –

@IlanBiala當事件處理程序被調用時，瀏覽器傳遞一個事件對象作爲參數。它不傳遞與事件有關的元素（當然，元素被傳遞，但作爲事件對象的屬性）。您的代碼被編寫爲參數是DOM元素本身，而不是。 – Pointy

http://keith-wood.name/maxlength.html

$("#limited-textarea").maxlength({ 
    max: 400 
});

來源

2013-04-01 13:38:30 kebyang

對不起，但是6行vs 3和一個額外的文件不是一個好的交易，不過好的想法，但對於更困難或更密集的事情，一個好的插件可以做到這一點 –

var maxchar = 10; 
 
$('#message').after('<span id="count" class="counter"></span>'); 
 
$('#count').html(maxchar+' of '+maxchar); 
 
$('#message').attr('maxlength', maxchar); 
 
$('#message').parent().addClass('wrap-text'); 
 
$('#message').on("keydown", function(e){ 
 
\t var len = $('#message').val().length; 
 
\t if (len >= maxchar && e.keyCode != 8) 
 
\t \t e.preventDefault(); 
 
\t else if(len <= maxchar && e.keyCode == 8){ 
 
\t \t if(len <= maxchar && len != 0) 
 
\t  \t \t $('#count').html(maxchar+' of '+(maxchar - len +1)); 
 
\t  \t else if(len == 0) 
 
\t  \t \t $('#count').html(maxchar+' of '+(maxchar - len)); 
 
\t }else 
 
\t \t $('#count').html(maxchar+' of '+(maxchar - len-1)); 
 
})

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

來源

2017-01-27 18:42:37

使用JavaScript的Textarea字符計數

回答

相關問題