Javascript для подсчета количества текстов в текстовой области путем ввода

не могли бы вы сообщить, как можно подсчитать количество текстов в текстовом поле, нажав «ввод».

Текстовое поле можно создать следующим образом:

 <textarea name="ta1" id="ta1" rows="4" cols="50">
 ABC[enter]
 DEF[enter]
 GHI[enter]
 </textarea>
 <input type="text" name="textnumber" value="">

Тогда «текстовый номер» мгновенно покажет «3». Спасибо.


person CKH    schedule 08.08.2016    source источник
comment
под enter вы имеете в виду newline?   -  person maioman    schedule 08.08.2016
comment
Да, введите означает новую строку   -  person CKH    schedule 08.08.2016
comment
Привет, если вы найдете какой-то ответ полезным и он решит вашу проблему, отметьте его как правильный ответ. заранее спасибо   -  person Den Kison    schedule 08.08.2016


Ответы (3)


Попробуйте сделать это таким образом

function getEntersCount(textarea, result) {
   var text = textarea.value,
       enters = text.split(/\r|\r\n|\n/),
       count = enters.length;

   result.value = count;
}

getEntersCount(
    document.getElementById("ta1"), 
    document.querySelector('[name="textnumber"]')
);

Угадайте, это поможет вам

ИЗМЕНИТЬ 1

getEntersCount(
    document.getElementById("ta1"), 
    document.getElementById('textnumber')
);

ИЗМЕНИТЬ 2

// Function will take text and return count of lines in it
function getEntersCount(text) {
    var enters = text.split(/\r|\r\n|\n/),
        count = enters.length;       
    return count;
}

// Usage example
var count = getEntersCount(document.getElementById("ta1").value) 
console.log(count);
person Den Kison    schedule 08.08.2016
comment
Спасибо. Но я использовал другую функцию javascript, чтобы вставить значение textnumber с помощью document.getElementById('textnumber').value, поэтому я не могу вызвать функцию. Но как? - person CKH; 22.08.2016
comment
Это тот подход, который вам нужен? - person Den Kison; 22.08.2016
comment
Не забудьте добавить в код функцию getEntersCount - person Den Kison; 22.08.2016
comment
Извините, я сказал неправильно ранее. Я использовал другую функцию javascript, чтобы вставить значение ta1, используя document.getElementById('ta1').value (т.е. значение в нескольких строках), поэтому я не могу вызвать функцию. Как мне вызвать вашу функцию вместо использования keyup или keydown? - person CKH; 23.08.2016
comment
Я имею в виду, что как только текстовое поле имеет значение, функция автоматически работает. Тогда как? - person CKH; 23.08.2016

Этот вопрос задавался раньше (см. здесь).

Вы можете использовать регулярное выражение, чтобы найти количество новых строк в строке. Шаблон для сопоставления: /\n/g, что означает количество вхождений новой строки.

См. это.

person Guy Waldman    schedule 08.08.2016

Чтобы подсчитать количество новых строк в текстовой области, вам необходимо:

  • получить значение textarea var val = document.querySelector('textarea').value

  • затем посчитайте \n (новая строка) var res = val.match(/\n/g).length

Чтобы связать результат и визуализировать его на входе, вы можете обернуть этот процесс в функцию, которая будет вызываться при каждом обновлении текстовой области,

попробуй это:

var tarea = document.querySelector('textarea')
var input = document.querySelector('input')

function update() {
  var res = (tarea.value.match(/\n/g)) ? tarea.value.match(/\n/g).length : 0;
  //                 ^^^^^^
  //          this is a ternary (like a conditional check)
  input.value = res;
}

tarea.addEventListener('input', update)
<textarea name="ta1" id="ta1" rows="4" cols="50">
  ABC DEF GHI
</textarea>
<input type="text" name="textnumber" value="0">

person maioman    schedule 08.08.2016
comment
Спасибо. Но можно ли его настроить так: Исходное значение textnumber равно 0. Значение обновляется только после нажатия ввода. - person CKH; 08.08.2016
comment
вы можете просто ввести стартовый value="0" - person maioman; 08.08.2016
comment
Но когда я попытался удалить все содержимое в текстовом поле, текстовое поле возвращается к 1 вместо 0. - person CKH; 08.08.2016
comment
на самом деле, если не было новых строк, я получал сообщение об ошибке... Я добавил условную проверку, если \n не найдено, значение равно 0 - person maioman; 08.08.2016
comment
Спасибо. Но я использовал другую функцию javascript, чтобы вставить значение textnumber с помощью document.getElementById('textnumber').value, поэтому я не могу вызвать функцию. Но как? - person CKH; 22.08.2016