JQuery Вычислить оставшуюся длину символов для ввода

У меня есть форма с дюжиной входных данных, каждая с разной максимальной длиной

Я хотел бы отобразить это разрешенное количество символов справа от этого ввода в div characters (когда мы щелкаем)

Затем скройте его, когда вы покинете ввод

Проблема в том, что я не могу получить переменную maxLenght, чтобы отправить ее в функции keyup, поэтому я получаю каждый ключ maxlength.

Как мне избежать всего этого?

$("input").focus(function() {
  var block = $(this).parent()
  var maxLength = $(this).attr('maxlength');

  var length = $(this).val().length;
  var length = maxLength - length;
  block.find(".characters").show().text(length);
  // return maxLength
});

$('input').keyup(function() {
  var block = $(this).parent()
  var maxLength = $(this).attr('maxlength');

  var length = $(this).val().length;
  var length = maxLength - length;
  block.find(".characters").show().text(length);
});

$("input").focusout(function() {
  $(this).next('.characters').text('');
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "form-group row">
  <div class = "col-xs-3">
    <div class = "input-title">Code 1</div>
    <input type = "search" name = "code_1" id = "code-1" class = "form-control dymax" value = "000" placeholder = "Code 1" autocomplete = "none" maxlength = "5">
    <div class = "characters"></div>
    <div class = "input-content"></div>
  </div>
  <div class = "col-xs-3">
    <div class = "input-title">Code 2</div>
    <input type = "search" name = "code_2" id = "code-2" class = "form-control dymax" value = "000" placeholder = "Code 2" autocomplete = "none" maxlength = "20">
    <div class = "characters"></div>
    <div class = "input-content"></div>
  </div>
  <div class = "col-xs-3">
    <div class = "input-title">Code 3</div>
    <input type = "search" name = "code_3" id = "code-3" class = "form-control dymax" value = "000" placeholder = "Code 3" autocomplete = "none" maxlength = "10">
    <div class = "characters"></div>
    <div class = "input-content"></div>
  </div>
  <div class = "col-xs-3">
    <div class = "input-title">Code 4</div>
    <input type = "search" name = "code_4" id = "code-4" class = "form-control dymax" value = "000" placeholder = "Code 4" autocomplete = "none" maxlength = "5">
    <div class = "characters"></div>
    <div class = "input-content"></div>
  </div>
</div>

Что вам не подходит?

— 10.12.2018 16:26

Нет способа получить переменную maxlength из focus, чтобы избежать извлечения этой переменной при каждой нажатой клавише?

— 10.12.2018 16:28

Удалите повторяющийся код с несколькими событиями $( "input" ).on('keyup focus change", function() { и цепочку с }).on('focusout',function(){...

— 10.12.2018 16:32

Что вам не нужно в приведенном выше коде?

— 10.12.2018 16:33

Если получение максимальной длины для focus / keyup каждый раз вызывает В самом деле, вызывая у вас проблемы, то у вас есть гораздо более серьезные проблемы. т.е. не беспокойтесь о микрооптимизации. (немного эффективнее было бы использовать .data("maxlength") и data-maxlength = "5", поскольку они будут кэшироваться в jquery, но вы не заметите разницы).

— 10.12.2018 16:37

@Rocstar Я ответил на Ваш вопрос. но "characters to the right" - я надеюсь, что вы сможете работать с css самостоятельно

— 10.12.2018 16:39

@ num8er Спасибо! Работает отлично (+1)

— 10.12.2018 16:41

javascript jquery

10.12.2018 16:21

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

384

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы хотите это:

$("input").on('focus keyup', function() {
  var $input = $(this);
  var value = $input.val();
  var maxLength = parseInt($input.attr('maxlength'));
  var remainingLength = maxLength - value.length;
  if (remainingLength < 0) {
    $input.val(value.substr(0, maxLength));
    remainingLength = 0;
  }
  $input.next().show().text(remainingLength);
});

$("input").focusout(function() {
  $(this).next().text('');
});

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous">

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class = "form-group row">
  <div class = "col-xs-3">
    <div class = "input-title">Code 1</div>
    <input type = "search" name = "code_1" id = "code-1" class = "form-control dymax" value = "000" placeholder = "Code 1" autocomplete = "none" maxlength = "5">
    <div class = "characters"></div>
    <div class = "input-content"></div>
  </div>
  <div class = "col-xs-3">
    <div class = "input-title">Code 2</div>
    <input type = "search" name = "code_2" id = "code-2" class = "form-control dymax" value = "000" placeholder = "Code 2" autocomplete = "none" maxlength = "20">
    <div class = "characters"></div>
    <div class = "input-content"></div>
  </div>
  <div class = "col-xs-3">
    <div class = "input-title">Code 3</div>
    <input type = "search" name = "code_3" id = "code-3" class = "form-control dymax" value = "000" placeholder = "Code 3" autocomplete = "none" maxlength = "10">
    <div class = "characters"></div>
    <div class = "input-content"></div>
  </div>
  <div class = "col-xs-3">
    <div class = "input-title">Code 4</div>
    <input type = "search" name = "code_4" id = "code-4" class = "form-control dymax" value = "000" placeholder = "Code 4" autocomplete = "none" maxlength = "5">
    <div class = "characters"></div>
    <div class = "input-content"></div>
  </div>
</div>

"символы справа" - возможно, используйте диапазон, а не div?

— 10.12.2018 16:34

@MarkSchultheiss, это не мой html, я просто использовал html и js автора вопроса и ответил на вопрос

— 10.12.2018 16:35

ох, он добавил лишнюю "фичу"

— 10.12.2018 16:36

@MarkSchultheiss "characters to the right" находится как раз в своем дополнительном CSS. в основном вопрос был: как получить максимальную длину, и я сделал это и сделал, чтобы не переполнять максимальную длину

— 10.12.2018 16:39

10.12.2018 16:29

У вас есть синтаксические ошибки с несколькими var length, вы также можете упростить код. Я бы также поместил настраиваемое событие на завершающий .characters, а не на вход, а затем инициировал его.

Обратите внимание, что, делая это таким образом, вы можете включить событие «search», которое запускается, когда вы щелкаете маленький x на входе, чтобы очистить его.

Я добавил настраиваемое событие и передал ему флаг для отображения / скрытия в той же функции, когда она запускается.

Я сделал divspan, чтобы показать его справа.

$("input.form-control").on('focus keyup change search', function() {
  var block = $(this).closest('.input-block');
  block.find(".characters").trigger('custom', ["show"]);
}).on('focusout', function(event) {
  var block = $(this).closest('.input-block');
  var chars = block.find(".characters");
  chars.trigger('custom', ["hide"]);
});
$('.characters').on('custom', function(event, dowhat) {
  let displayMe = dowhat === "show" ? true : false;
  let charTxt = $(this);
  if (displayMe) {
    let block = $(this).closest('.input-block');
    let blockInput = block.find("input.form-control");
    let maxLength = blockInput.attr('maxlength');

    let currentLength = blockInput.val().length;
    let allowedLength = maxLength - currentLength;
    charTxt.text(allowedLength + "");
  }
  charTxt.toggle(displayMe);
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "form-group row">
  <div class = "input-block col-xs-3">
    <div class = "input-title">Code 1</div>
    <input type = "search" name = "code_1" id = "code-1" class = "form-control dymax" value = "000" placeholder = "Code 1" autocomplete = "none" maxlength = "5">
    <span class = "characters"></span>
    <div class = "input-content"></div>
  </div>
  <div class = "input-block col-xs-3">
    <div class = "input-title">Code 2</div>
    <input type = "search" name = "code_2" id = "code-2" class = "form-control dymax" value = "000" placeholder = "Code 2" autocomplete = "none" maxlength = "20">
    <span class = "characters"></span>
    <div class = "input-content"></div>
  </div>
  <div class = "input-block col-xs-3">
    <div class = "input-title">Code 3</div>
    <input type = "search" name = "code_3" id = "code-3" class = "form-control dymax" value = "000" placeholder = "Code 3" autocomplete = "none" maxlength = "10">
    <span class = "characters"></span>
    <div class = "input-content"></div>
  </div>
  <div class = "input-block col-xs-3">
    <div class = "input-title">Code 4</div>
    <input type = "search" name = "code_4" id = "code-4" class = "form-control dymax" value = "000" placeholder = "Code 4" autocomplete = "none" maxlength = "5">
    <span class = "characters"></span>
    <div class = "input-content"></div>
  </div>
</div>

10.12.2018 17:44

Другие вопросы по теме

Как передать значение элементу списка

Как использовать parallax.js только из Materialize

Измените тип «сохранить как» на диалоговое окно .xls в IE (Internet Explorer) с помощью JQuery

Преобразовать: навести меню в onclick для использования на мобильных устройствах

Отправьте заполненные поля онлайн

Селектор: enabled в Microsoft Edge

Привязка событий с помощью $ (window) к динамически созданным элементам AJAX

Изменение classList с помощью jQuery

Dynatree "получило недопустимое событие загрузки"

Просмотр таблицы и сохранение значений в виде пары ключ / значение

JQuery Вычислить оставшуюся длину символов для ввода

Ответы 2

Другие вопросы по теме

Похожие вопросы