Покажите, сколько символов осталось в текстовом поле HTML с использованием JavaScript

Ответ 1

Код в здесь с небольшим изменением и упрощением:

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

Надеюсь, это поможет!

Совет:

При слиянии кодов с вашей страницей убедитесь, что элементы HTML (textarea, input) загружены первыми до того, как скрипты (функции Javascript)

Ответ 2

Вы можете связать событие нажатия клавиши с вашим полем ввода и вернуть false, если символы более 160 будут решать проблему 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>

Ответ 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-->

Ответ 4

Просто зарегистрируйте 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 может быть отключен или пользователь хочет сделать что-то противное специально.

Ответ 5

Как насчет этого подхода, который разбивает проблему на две части:

• Используя jQuery, он показывает декрементный счетчик ниже textarea, который становится красным, когда он достигает нуля, но все же позволяет пользователю вводить текст.
• Я использую отдельный инструмент проверки длины строки (сервер и клиентская сторона), чтобы фактически предотвратить отправку формы, если количество символов в textarea больше 160.

My textarea имеет идентификатор Message, а span, в котором я показываю количество оставшихся символов, имеет идентификатор counter. Класс css error применяется, когда число оставшихся символов достигает нуля.

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

Ответ 6

Попробуйте использовать следующий код:

рабочий код 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>

Надеюсь, что это поможет!

Ответ 7

попробуйте этот код здесь... это делается с помощью функции 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>

текстовое показание счетчика

Ответ 8

Мне нужно было что-то подобное, и решение, которое я дал с помощью jquery, следующее:

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

С помощью этого script:

// 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  text
    counterElement.html((maxLength - this.value.length) + " chars left");
});

А жить демо Здесь

Ответ 9

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