计算文本区域字符数

我正在为这个网站上的文本区域开发字符数。现在，它说 NaN，因为它似乎找不到字段中有多少个字符的长度，开头是 0，所以数字应该是 500。在 chrome 开发者工具的控制台中，不会发生任何错误。我所有的代码都在网站上，我什至尝试使用jQuery常规JavaScript来计算文本区域字段的字符数，但似乎没有任何效果。

请告诉我我在联系人.js文件中的jQuery和JavaScript代码中做错了什么。

$(document).ready(function() {
    var tel1 = document.forms["form"].elements.tel1;
    var tel2 = document.forms["form"].elements.tel2;
    var textarea = document.forms["form"].elements.textarea;
    var clock = document.getElementById("clock");
    var count = document.getElementById("count");
    tel1.addEventListener("keyup", function (e){
        checkTel(tel1.value, tel2);
    });
    tel2.addEventListener("keyup", function (e){
        checkTel(tel2.value, tel3);
    });
    /*$("#textarea").keyup(function(){
        var length = textarea.length;
        console.log(length);
        var charactersLeft = 500 - length;
        console.log(charactersLeft);
        count.innerHTML = "Characters left: " + charactersLeft;
        console.log("Characters left: " + charactersLeft);
    });â€‹*/
    textarea.addEventListener("keypress", textareaLengthCheck(textarea), false);
});
function checkTel(input, nextField) {
    if (input.length == 3) {
        nextField.focus();
    } else if (input.length > 0) {
        clock.style.display = "block";
    } 
}
function textareaLengthCheck(textarea) {
    var length = textarea.length;
    var charactersLeft = 500 - length;
    count.innerHTML = "Characters left: " + charactersLeft;
}

$("#textarea").keyup(function(){
  $("#count").text($(this).val().length);
});

以上将做你想要的。如果您想进行倒计时，请将其更改为以下内容：

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

或者，您可以使用以下代码完成相同的操作，而无需jQuery。(谢谢@Niet(

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

⚠️ 接受的解决方案已经过时。

下面是不会触发 keyup 事件的两种情况：

用户将文本拖到文本区域中。
用户通过右键单击(上下文菜单(在文本区域中复制粘贴文本。

请改用 HTML5 input 事件以获得更可靠的解决方案：

<textarea maxlength='140'></textarea>

JavaScript (demo(：

const textarea = document.querySelector("textarea");
textarea.addEventListener("input", event => {
    const target = event.currentTarget;
    const maxLength = target.getAttribute("maxlength");
    const currentLength = target.value.length;
    if (currentLength >= maxLength) {
        return console.log("You have reached the maximum number of characters.");
    }
    
    console.log(`${maxLength - currentLength} chars left`);
});

如果你绝对想使用 jQuery：

$('textarea').on("input", function(){
    var maxlength = $(this).attr("maxlength");
    var currentLength = $(this).val().length;
    if( currentLength >= maxlength ){
        console.log("You have reached the maximum number of characters.");
    }else{
        console.log(maxlength - currentLength + " chars left");
    }
});

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

您正在调用textareaLengthCheck，然后将其返回值分配给事件侦听器。这就是为什么它在加载后不更新或执行任何操作的原因。试试这个：

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

除此之外：

var length = textarea.length;

textarea是实际的文本区域，而不是值。试试这个：

var length = textarea.value.length;

结合前面的建议，您的函数应该是：

function textareaLengthCheck() {
    var length = this.value.length;
    // rest of code
};

这是简单的代码。希望对您有所帮助

$(document).ready(function() {
var text_max = 99;
$('#textarea_feedback').html(text_max + ' characters remaining');
$('#textarea').keyup(function() {
    var text_length = $('#textarea').val().length;
    var text_remaining = text_max - text_length;
    $('#textarea_feedback').html(text_remaining + ' characters remaining');
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea" rows="8" cols="30" maxlength="99" ></textarea>
<div id="textarea_feedback"></div>

此代码从textarea的 maxlength 属性中获取最大值，并在用户键入时减小该值。

<演示>

var el_t = document.getElementById('textarea');
var length = el_t.getAttribute("maxlength");
var el_c = document.getElementById('count');
el_c.innerHTML = length;
el_t.onkeyup = function () {
  document.getElementById('count').innerHTML = (length - this.value.length);
};

<textarea id="textarea" name="text"
 maxlength="500"></textarea>
<span id="count"></span>

我发现接受的答案并不完全适用于textarea s，因为 Chrome 在具有 maxlength 属性的文本区域中计算错误的字符，因为换行符和回车符字符，如果您需要知道在数据库中存储信息时会占用多少空间，这一点很重要。此外，由于从剪贴板拖放和粘贴文本，键控的使用被折旧，这就是我使用 input 和 propertychange 事件的原因。下面考虑了换行符并准确计算了textarea的长度。

$(function() {
  $("#myTextArea").on("input propertychange", function(event) {
    var curlen = $(this).val().replace(/r(?!n)|n(?!r)/g, "rn").length;
    $("#counter").html(curlen);
  });
});
$("#counter").text($("#myTextArea").val().replace(/r(?!n)|n(?!r)/g, "rn").length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<textarea id="myTextArea"></textarea><br>
Size: <span id="counter" />

对于那些想要一个没有jQuery的简单解决方案的人来说，这里有一种方法。

要放入表单的文本区域和消息容器：

<textarea onKeyUp="count_it()" id="text" name="text"></textarea>
Length <span id="counter"></span>

JavaScript：

<script>
function count_it() {
    document.getElementById('counter').innerHTML = document.getElementById('text').value.length;
}
count_it();
</script>

该脚本首先计算字符数，然后对每次击键进行计数，并将数字放在计数器范围中。

马丁

他们说IE在input事件方面存在问题，但除此之外，解决方案相当简单。

ta = document.querySelector("textarea");
count = document.querySelector("label");
ta.addEventListener("input", function (e) {
  count.innerHTML = this.value.length;
});

<textarea id="my-textarea" rows="4" cols="50" maxlength="10">
</textarea>
<label for="my-textarea"></label>

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){
	var len =  $('#message').val().length;
	if (len >= maxchar && e.keyCode != 8)
		   e.preventDefault();
	else if(len <= maxchar && e.keyCode == 8){
		if(len <= maxchar && len != 0)
	   		$('#count').html(maxchar+' of '+(maxchar - len +1));
	   	else if(len == 0)
	   		$('#count').html(maxchar+' of '+(maxchar - len));
	}else
		 $('#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" name="text"></textarea>

    $(document).ready(function(){ 
    $('#characterLeft').text('140 characters left');
    $('#message').keydown(function () {
        var max = 140;
        var len = $(this).val().length;
        if (len >= max) {
            $('#characterLeft').text('You have reached the limit');
            $('#characterLeft').addClass('red');
            $('#btnSubmit').addClass('disabled');            
        } 
        else {
            var ch = max - len;
            $('#characterLeft').text(ch + ' characters left');
            $('#btnSubmit').removeClass('disabled');
            $('#characterLeft').removeClass('red');            
        }
    });    
});

此解决方案将响应键盘和鼠标事件，并应用于初始文本。

    $(document).ready(function () {
        $('textarea').bind('input propertychange', function () {
            atualizaTextoContador($(this));
        });
        $('textarea').each(function () {
            atualizaTextoContador($(this));
        });
    });
    function atualizaTextoContador(textarea) {
        var spanContador = textarea.next('span.contador');
        var maxlength = textarea.attr('maxlength');
        if (!spanContador || !maxlength)
            return;
        var numCaracteres = textarea.val().length;
        spanContador.html(numCaracteres + ' / ' + maxlength);
    }

    span.contador {
        display: block;
        margin-top: -20px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea maxlength="100" rows="4">initial text</textarea>
<span class="contador"></span>

⚠️ 接受的解决方案已经过时。

相关内容

最新更新

热门标签：