これは私のコードです：
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の制限がある特定のテキストボックスから残っている文字数を表示するにはどうすればよいですか？
ダイナミック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）が最初にロードされていることを確認してください。
キープレスイベントを入力ボックスにバインドし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>
以下に含まれているのは、入力が削除されたときに残りの文字を適切に更新する、単純に機能するJS/HTML実装です。
レイアウトと機能を一致させるには、ブートストラップとJQueryが必要です。（含まれているコードスニペットに従って、JQuery 2.1.1でテストされています）。
HTMLの後にロードされるようにJSコードを含めるようにしてください。ご不明な点がございましたら、私にメッセージを送ってください。
$(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-->イベントにEventhandlerを登録し、keydownその関数の入力フィールドの長さを確認して、別の要素に書き込むだけです。
デモをご覧ください。
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が無効になっている可能性があるか、ユーザーが意図的に厄介なことをしたい場合があるため、サーバーの長さも確認する必要があります。
これを試して
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');
});
});
問題を2つの部分に分割するこのアプローチはどうですか。
textarea、ゼロに達すると赤に変わりますが、ユーザーは入力できます。textareaのチャットアクターの数が160を超える場合、フォームの送信を実際に防ぐために、別の文字列長バリデーター（サーバー側とクライアント側）を使用します。私textareaのIDはMessage、で、span残りの文字数を表示するIDの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);
});
});
たとえば、次のコードを試してください。
jsfiddle.netの作業コード
textAreaの場合、これを使用します。
<textarea id="txtBox"></textarea>
...
...
textBoxの場合は、次を使用します。
<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>
お役に立てれば！
ここでこのコードを試してください...これはjavascriptonKeyUp（）関数を使用して行われます...
<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>
私はそのようなものが必要でした、そして私が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");
});
Αライブデモはこちら
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);