Счетчик клавиш для нажатых клавиш (набранные буквы) и удаленных букв - PullRequest
Новая
       1

Счетчик клавиш для нажатых клавиш (набранные буквы) и удаленных букв

0 голосов
/ 17 января 2020

Привет всем (я - испанец sh, извините, если у меня есть грамматические или словарные ошибки)! Я учусь JS и Jquery сейчас. Одним из моих многочисленных упражнений является ввод текста и подсчет нажатых / написанных / напечатанных И удаленных клавиш в режиме реального времени. Итак, подсчет ключей, которые я пишу, в порядке, проблема в том, что я не знаю, как вычесть, как определить, что вы удаляете буквы, и вычесть их.

Это код для подсчета клавиши нажаты. Но проблема заключается в удалении. Помоги мне, пожалуйста! :) 

<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='utf-8'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
      i = 0;
      $(document).ready(function(){

        $("input").keypress(function(){
          $("span").text(i += 1);
        });
      });
    </script>
  </head>
  <body>
    Type your text: <input type="textarea" width="500px" height="300px">
    <p>Keys: <span>0</span></p>
  </body>
</html>

Ответы [ 6 ]

1 голос
/ 17 января 2020

вместо вашего варианта попробуйте это 

function updateLength() {
  $("span").text(this.value.length);
}
$('input').on('input', updateLength)

, и если вы все еще хотите использовать свой метод, тогда go попробуйте это 

$('input').keyup(function(e) {
  console.log(e.keyCode);
  if(e.keyCode === 8 || event.keyCode === 46) {
    console.log('u :', i);
    i -= 1
    if (i < 0) i = 0
    $("span").text(i);
  } else {
    i += 1
    $("span").text(i);
  }
});

, но я думаю, что приведенный выше код намного чище .

0 голосов
/ 17 января 2020

Нет такой вещи как type="textarea". Возможно, вам нужен тег textarea . Кроме того, вам не нужно jQuery для этого. Ванили JS должно быть более чем достаточно. 

const input = document.querySelector('.my-input');
const count = document.querySelector('.count');

input.addEventListener('input', event => {
  count.innerText = event.target.value.length
});
.my-input {
  height: 100px;
  width: 400px;
  display: block;
}
<label for="my-input">Type your text:</label>
<textarea name="my-input" class="my-input"></textarea>

<div>
  <span>Count:</span>
  <span class="count">0</span>
</div>
0 голосов
/ 17 января 2020

Хотя ответа Syed достаточно для простого подхода, у него есть несколько недостатков:

  • Если вы удерживаете клавишу Backspace, это уменьшит счет на единицу, даже если вы удалили весь контент.
  • Вы должны указать весь список ключей, которые вы не хотите запускать счетчик (F1-F12, shift, ...), и он немного длинный (однако проблема также возникает в вашем версия кода).

Решение, которое вы ищете, - это простой метод получения длины текста, когда что-то меняется. 

i = 0;
$(document).ready(function(){

  $("input").keyup(function(event){
    i = $(event.target).val().length;
    $("span").text(i);
  });
});

Поскольку мы получаем событие на нашем <input>, мы $(event.target) напрямую предоставим нам доступ к тегу <input>, что позволит нам получить содержимое (.val()) и получить длину введенного в него текста.

i переменная не обязательна, но может быть полезна, если вы хотите показать где-нибудь (добавлено х символов) или (удалено х символов).

https://jsfiddle.net/e84L5d6c/1/

0 голосов
/ 17 января 2020

в JavaScript, вы можете получить нажатой код клавиши, используя event.keyCode.

значение клавиши Backspace равно 8, а значение кода удаления равно 46.

Итак, при каждом событии нажатия клавиши я проверяю, соответствует ли оно любому из 8 или 46, тогда я могу уменьшить значение на 1, в противном случае увеличить значение.

Вот мой код: 

$(document).ready(function() {
  var i = 0;
  $("input").keydown(function(event) {
   console.log(event.keyCode);
    console.log(i);
    if (event.keyCode === 8 || event.keyCode === 46) {
      console.log('here');
      $("span").text(i -= 1);
    } else {
     $("span").text(i += 1); 
    }
  });
});

У меня здесь тот же код в коде: https://codepen.io/gideonbabu/pen/oNgajob

Для кода ключа я лично используйте этот сайт https://keycode.info/ от Wesbos. Вы можете попробовать. Вы просто go заходите на этот сайт и нажимаете любую клавишу на клавиатуре, и на сайте отображается код клавиши нажатых клавиш.

0 голосов
/ 17 января 2020 
let myInputValueLength = 0;
$('#myInputId').on('input', function() {
    myInputValueLength = this.value.length;
    console.log(this.value.length);
});

https://jsfiddle.net/efh9z3ux/1/

0 голосов
/ 17 января 2020

Вы можете получить его по коду ключа и уменьшить количество.

Примечание: Backspace не сработает при keypress, поэтому я использовал keyup. 

 i = 0;
        $(document).ready(function(){

            $("input").keyup(function(event){
            switch (event.keyCode) {
                case 8: // Backspace
                case 46: // delete
                  $("span").text(i -= 1);
                case 9: // Tab
                case 13: // Enter
                case 37: // Left
                case 38: // Up
                case 39: // Right
                case 40: // Down
                   break;

                default:
                   $("span").text(i += 1);
             }
            });
        });
<!DOCTYPE html>
<html lang='es'>
<head>
    <meta charset='utf-8'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

   Type your text: <input type="textarea" width="500px" height="300px">

   <p>Keys: <span>0</span></p>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...