使用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字符计数

回答

相关问题