使用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？

Answer 1

动态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)

Answer 2

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

JS

$('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>

Answer 3

下面是一个简单的工作JS/HTML实现,它在删除输入时正确更新剩余的字符.

需要Bootstrap和JQuery才能匹配布局和功能.(根据包含的代码片段在JQuery 2.1.1上测试过).

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

Le Code:

$(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-->

Answer 4

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

\n\n

请参阅演示。

\n\n

var maxchar = 160;\nvar i = document.getElementById("textinput");\nvar c = document.getElementById("count");\nc.innerHTML = maxchar;\n\ni.addEventListener("keydown",count);\n\nfunction count(e){\n    var len =  i.value.length;\n    if (len >= maxchar){\n       e.preventDefault();\n    } else{\n       c.innerHTML = maxchar - len-1;   \n    }\n}\n\xe2\x80\x8b\n

\n\n

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

\n