javascript - 使用 JavaScript 显示 HTML 文本框中剩余的字符数

Question

这是我的代码：

function textCounter(field, countfield, maxlimit) {
    if (field.value.length > maxlimit) {
        field.value = field.value.substring(0, 160);
        field.blur();
        field.focus();
        return false;
    } else {
        countfield.value = maxlimit - field.value.length;
    }
}

如何显示某个文本框中剩余的字符数，限制为 160？

score 66 · Accepted Answer

动态 HTML 元素函数这里的代码稍作修改和简化：

<input disabled  maxlength="3" size="3" value="10" id="counter">
<textarea onkeyup="textCounter(this,'counter',10);" id="message">
</textarea>
<script>
function textCounter(field,field2,maxlimit)
{
 var countfield = document.getElementById(field2);
 if ( field.value.length > maxlimit ) {
  field.value = field.value.substring( 0, maxlimit );
  return false;
 } else {
  countfield.value = maxlimit - field.value.length;
 }
}
</script>

希望这可以帮助！

小费：

将代码与您的页面合并时，请确保在脚本（Javascript 函数）之前首先加载 HTML 元素（textarea、input）

score 37 · Accepted Answer

您可以将按键事件与输入框绑定，false如果字符超过 160 个则返回将解决问题jsfiddle。

JavaScript：

$('textarea').keypress(function(){

    if(this.value.length > 160){
        return false;
    }

    $("#remainingC").html("Remaining characters : " + (160 - this.value.length));
});

HTML

<textarea></textarea>
<span id='remainingC'></span>

score 9 · Accepted Answer

下面包括一个简单的工作 JS/HTML 实现，当输入被删除时，它会正确更新剩余的字符。

布局和功能需要 Bootstrap 和 JQuery 才能匹配。（根据包含的代码片段在 JQuery 2.1.1 上测试）。

确保包含 JS 代码，以便在 HTML 之后加载它。如果您有任何问题，请给我留言。

乐代码：

$(document).ready(function() {
  var len = 0;
  var maxchar = 200;

  $( '#my-input' ).keyup(function(){
    len = this.value.length
    if(len > maxchar){
        return false;
    }
    else if (len > 0) {
        $( "#remainingC" ).html( "Remaining characters: " +( maxchar - len ) );
    }
    else {
        $( "#remainingC" ).html( "Remaining characters: " +( maxchar ) );
    }
  })
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-sm-6 form-group">
    <label>Textarea</label>
    <textarea placeholder="Enter the textarea input here.. (limited to 200 characters)" rows="3" class="form-control" name="my-name" id="my-input" maxlength="200"></textarea><span id='remainingC'></span>
  </div>
</div> <!--row-->

score 5 · Accepted Answer

只需在事件上注册一个 Eventhandlerkeydown并检查该函数上输入字段的长度并将其写入单独的元素。

请参阅演示。

var maxchar = 160;
var i = document.getElementById("textinput");
var c = document.getElementById("count");
c.innerHTML = maxchar;

i.addEventListener("keydown",count);

function count(e){
    var len =  i.value.length;
    if (len >= maxchar){
       e.preventDefault();
    } else{
       c.innerHTML = maxchar - len-1;   
    }
}

您也应该检查服务器上的长度，因为 Javascript 可能被禁用或者用户想要故意做一些讨厌的事情。

score 4 · Accepted Answer

尝试这个

HTML

<textarea id="textarea" rows="8" cols="50" maxlength="100" ></textarea>
<div id="feedback"></div>

JS

$(document).ready(function() {
        var max = 1000;
        $('#feedback').html(max + 'characters remaining');

        $('#textarea').keyup(function() {
            var text_length = $('#textarea').val().length;
            var text_remaining = max - text_length;

            $('#feedback').html(text_remaining + ' characters remaining');
        });
    });

score 1 · Accepted Answer

这种方法怎么样，它将问题分为两部分：

使用 jQuery，它在下方显示一个递减计数器textarea，当它达到零时变为红色，但仍允许用户键入。
textarea如果聊天者的数量大于 160 ，我使用单独的字符串长度验证器（服务器和客户端）来实际阻止提交表单。

我textarea的 id 为Message，span我在其中显示剩余字符数的 id 为counter。error当剩余字符数达到零时，将应用css 类。

var charactersAllowed = 160;

$(document).ready(function () {
    $('#Message').keyup(function () {
        var left = charactersAllowed - $(this).val().length;
        if (left < 0) {
            $('#counter').addClass('error');
            left = 0;
        }
        else {
            $('#counter').removeClass('error');
        }
        $('#counter').text('Characters left: ' + left);
    });
});

score 1 · Accepted Answer

例如尝试以下代码：

jsfiddle.net中的工作代码

对于 textArea，使用这个：

<textarea id="txtBox"></textarea>
...
...

对于文本框，使用这个：

<input type="text" id="txtBox"/>
<br>
<input type="text" id="counterBox"/>
<script>
 var txtBoxRef = document.querySelector("#txtBox");
 var counterRef = document.querySelector("#counterBox");
 txtBoxRef.addEventListener("keydown",function(){
  var remLength = 0;
  remLength = 160 - parseInt(txtBoxRef.value.length);
  if(remLength < 0)
   {
    txtBoxRef.value = txtBoxRef.value.substring(0, 160);
    return false;
   }
  counterRef.value = remLength + " characters remaining...";
 },true);
</script>

希望这可以帮助！

score 0 · Accepted Answer

在此处尝试此代码...这是使用 javascript onKeyUp() 函数完成的...

<script>
function toCount(entrance,exit,text,characters) {  
var entranceObj=document.getElementById(entrance);  
var exitObj=document.getElementById(exit);  
var length=characters - entranceObj.value.length;  
if(length <= 0) {  
length=0;  
text='<span class="disable"> '+text+' <\/span>';  
entranceObj.value=entranceObj.value.substr(0,characters);  
}  
exitObj.innerHTML = text.replace("{CHAR}",length);  
}
</script>

textarea 计数器演示

score 0 · Accepted Answer

HTML：

 <form>
  <textarea id='text' maxlength='10'></textarea>
  <div id='msg'>10 characters left</div>
  <div id='lastChar'></div>
</form>

JS：

function charCount() {
  var textEntered = document.getElementById('text').value;
  var msg = document.getElementById('msg');
  var counter = (10-(textEntered.length));
  msg.textContent = counter+' characters left';
}

var el = document.getElementById('text');
el.addEventListener('keyup',charCount,false);

score 0 · Accepted Answer

我需要类似的东西，我在 jquery 的帮助下给出的解决方案是：

<textarea class="textlimited" data-textcounterid="counter1" maxlength="30">text</textarea>
<span class='textcounter' id="counter1"></span>

使用此脚本：

// the selector below will catch the keyup events of elements decorated with class textlimited and have a maxlength
$('.textlimited[maxlength]').keyup(function(){
     //get the fields limit
    var maxLength = $(this).attr("maxlength");

    // check if the limit is passed
    if(this.value.length > maxLength){
        return false;
    }

    // find the counter element by the id specified in the source input element
    var counterElement = $(".textcounter#" + $(this).data("textcounterid"));
    // update counter 's text
    counterElement.html((maxLength - this.value.length) + " chars left");
});

现场演示在这里

javascript - 使用 JavaScript 显示 HTML 文本框中剩余的字符数

10 回答 10

乐代码：

Related

Reference