Как добавить проверку в textarea для min 250 и max 1000 слов?

Question

Я пытаюсь добавить проверку jquery в поле текстовой области для минимум 250 слов и максимум 1000 слов.А также отображать количество слов в теге span рядом с текстовой областью.Также я также, как я могу проверить, если пользователь скопировать вставить в текстовую область, то также эта проверка должна работать.Любая помощь и предложение должны быть оценены.

var maxWords = 1000;
var minWords = 250;

$(document).on('keypress', 'textarea[name="writ"]', function(e) {
  var $this, wordcount;

  $this = $(this);
  wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
  if (wordcount > maxWords) {
    $('.writing_erorr').text("You've reached the maximum allowed words 1000.");
    return false;
  } else {
    return $('#writing span').text('Total words: ' + wordcount);
  }
});

$("textarea[name='writ']").bind('paste', function(e) {
  // access the clipboard using the api
  var pastedData = e.originalEvent.clipboardData.getData('text');
  alert(pastedData);
  var $this, wordcount;

  $this = $(this);
  wordcount = $this.val().split(/\b[\s,\.-:;]*/).length;
  if (wordcount > maxWords) {
    $('.writing_erorr').text("You've reached the maximum allowed words 1000.");
    return false;
  } else {
    return $('#writing span').text('Total words: ' + wordcount);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=writing class=cond>
    <label class="required">Writing Entry</label>
    <textarea name=writ placeholder="Writing Entries: 100 words min, 600 words max"></textarea>
    <span></span>
    <div class="writing_erorr"></div>
</div>

Answer 1

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

Вам необходимо добавить следующееатрибуты word-limit="true", max-words='n', min-words='n'.Заполнитель больше не нужен, потому что код автоматически генерирует один за другим загрузку страницы.

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

---

Количество слов

Основной код для подсчета слов выглядит следующим образом:

wordCount = $.trim( $("#writing").val() ).split(/\s+/).filter(Boolean).length;

Объяснение кода:

• $("#writing").val() - получает значение текстовой области (то есть строки)
• .trim() удаляет все пробелы в начале или конце строки
• .split(/\s+/) делитстрока вокруг каждого пробела и помещает их в массивт.е. сколько слов существует)

---

Демо

// Cycle through each textarea and add placeholder with individual word limits
$("textarea[word-limit=true]").each(function() {
  $(this).attr("placeholder", "Writing entries: " + $(this).attr("min-words") + " words min, " + $(this).attr("max-words") + " words max");
});


// Add event trigger for change to textareas with limit
$(document).on("input", "textarea[word-limit=true]", function() {


  // Get individual limits
  thisMin = parseInt($(this).attr("min-words"));
  thisMax = parseInt($(this).attr("max-words"));

  // Create array of words, skipping the blanks
  var removedBlanks = [];
  removedBlanks = $(this).val().split(/\s+/).filter(Boolean);
  
  // Get word count
  var wordCount = removedBlanks.length;
 
  // Remove extra words from string if over word limit
  if (wordCount > thisMax) {
        
      // Trim string, use slice to get the first 'n' values
      var trimmed = removedBlanks.slice(0, thisMax ).join(" ");
      
      // Add space to ensure further typing attempts to add a new word (rather than adding to penultimate word)
      $(this).val(trimmed + " ");
      
    }
    
 
  // Compare word count to limits and print message as appropriate
  if ( wordCount < thisMin) {
  
    $(this).parent().children(".writing_error").text("Word count under " + thisMin + ".");
  
  } else if (wordCount > thisMax) {

    $(this).parent().children(".writing_error").text("Word count over " + thisMax + ".");
  
  } else {
    
    // No issues, remove warning message
    $(this).parent().children(".writing_error").text("");

  }

});

.writing_error {
  color: red;
}

[id^=writing] {
  border-bottom: 1px solid grey;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

label {
  width: 100%;
}

textarea {
  width: 100%;
  margin-top: 4px;
}

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

<div id=writing1 class=cond>
  <label class="required">Writing Entry 1</label>
  <textarea name=writ word-limit="true" max-words="600" min-words="100"></textarea>
  <span></span>
  <div class="writing_error"></div>
</div>


<div id=writing2 class=cond>
  <label class="required">Writing Entry 2</label>
  <textarea name=writ></textarea>
  <span></span>
  <div class="writing_error"></div>
</div>

<div id=writing3 class=cond>
  <label class="required">Writing Entry 3</label>
  <textarea name=writ word-limit="true" max-words="10" min-words="4"></textarea>
  <span></span>
  <div class="writing_error"></div>
</div>

Answer 2

в вашем javascript:

$('textarea#message_area').on('keyup',function() 
{
  var maxlen = $(this).attr('maxlength');

  var length = $(this).val().length;
  if(length > (maxlen-10) ){
    $('#textarea_message').text('max length '+maxlen+' characters only!')
  }
  else
    {
      $('#textarea_message').text('');
    }
});

элемент:

<form>
  <label for="message_area">No more than 100 characters</label>
  <p>
  <textarea id="message_area" maxlength="100" rows="6" cols="70"></textarea>
  </p>
  <span class="hint" id="textarea_message"></span>
</form>