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

Posted 2023-05-07

【中文标题】使用 JavaScript 显示 HTML 文本框中剩余的字符数

【英文标题】：Show how many characters remaining in a HTML text box using JavaScript

【发布时间】：2012-09-26 09:27:22

【问题描述】：

这是我的代码：

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？

【问题讨论】：

有什么问题吗？该代码不起作用吗？如果没有，它会做什么而不是您所期望的？

@AlexWayne 它只设置了文本区域的最大限制，即 306。我的代码不起作用，我只需要将限制设置为 160。

您使用的是什么服务器技术？您还应该考虑服务器端长度验证，否则如果用户在浏览器中关闭了 javascript，您的方法可能会被绕过。

如果你想要一个纯 JavaScript 解决方案而不是 jQuery，请查看我的答案，我为你附上了一个演示。

【参考方案1】：

Dynamic html element functionhere中的代码稍作修改和简化：

<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）

【讨论】：

keypress 事件仅在按键正常产生字符值时触发。因此，您将无法捕捉退格或粘贴操作。我建议改用输入事件 -> developer.mozilla.org/en-US/docs/Web/Events/input

考虑使用类似这样的东西来捕捉内容变化，因为 keyup 无法处理所有情况：#("message").bind('input propertychange', function () textCounter(this,'counter ',10);)

【参考方案2】：

您可以将按键事件与您的输入框绑定，如果字符超过160，则返回false将解决问题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>

【讨论】：

我需要剩余字符数。

@Shusl 那是 HTML 我在 C# 中需要它

@ChristineS 但你的问题与 JavaScript 和 textarea 有关。

@ChristineS 对不起，我不知道如何在 C# 中使用 JS 和 HTML

不错且简单的解决方案@Anoop，但是我做了一些小的修改：jsfiddle.net/r34gM/203 ...我使用 keyup 而不是 keypress（以捕获 BACKSPACE），并且我尝试将这种方法更概括一点。当然标记需要正确设置（文本区域之后的span元素）。

【参考方案3】：

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

Bootstrap 和 JQuery 需要布局和功能匹配。 （根据包含的代码 sn-p 在 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-->

【参考方案4】：

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

请参阅 demo。

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 可能被禁用或用户想要故意做一些讨厌的事情。

【讨论】：

我已经尝试过了，它在 JSfiddle 中运行良好。但是当我将它与我的页面结合起来时，它不会显示剩余字符:(顺便说一下我的语言是 C#

@Christine 将onblur="textCounter(this,this.form.counter,306);" 中的306 更改为160。并将field.value.substring(0, 160); 中的160 更改回maxlimit。

【参考方案5】：

试试这个

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');
        );
    );

【参考方案6】：

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

使用 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);
    );
);

【讨论】：

用户希望在 javascript 中而不是在 jquery 中得到答案

@ChristineS 我不确定你的意思。你能澄清一下吗？

@RichardEv 这是我复制代码的网站，我遇到了CharactersRemainingCode的问题

【参考方案7】：

例如尝试以下代码：

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>

希望对您有所帮助！

【讨论】：

@Crystal Paladin 这是我复制代码的站点，我遇到CharactersRemainingCode 有问题

@vaahost 你是怎么做到的？我无法将它与我的页面结合起来。

@ChristineS 我已经更改了一些代码，所以它对我有用

@ChristineS 我可以看一下您尝试将其与之结合的代码吗？

@CrystalPaladin 这是我复制整个代码的地方CharactersRemainingCode

【参考方案8】：

在此处尝试此代码...这是使用 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 counter demo

【参考方案9】：

我需要类似的东西，我在 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");
);

Α 现场演示Here

【参考方案10】：

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);