Как проверить contenteditable длину текста в абзаце, на основе стоимости - PullRequest
Новая
       55

Как проверить contenteditable длину текста в абзаце, на основе стоимости

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

Мне нужно отключить ввод текста в соответствии с длиной текста в contenteditable абзаце. 

<p id="test" class="given" contenteditable="true"></p>

Что означает, что мне нужно избегать ввода текста, 

  $("p.given").on('click keydown keyup',function(e) {

    var templateText = getContent($(this)); //Test [FirstName] ! Lorem Ipsum is  [LocationName]. the printing and typesetting.


      // 46,8 keycodes for delete & backspace
    if (templateText.length >= 100  && e.keyCode !== 46 && e.keyCode !== 8){
       e.preventDefault();
    }

  });

this getContent() метод возвращает следующую примерную строку outout. 

Test [FirstName] ! Lorem Ipsum is  [LocationName]. the printing and typesetting.

Вышеупомянутая click keydown keyup функция не работает должным образом. Что мне нужно сделать, это

Мне нужно учитывать длину [FirstName] как 50 [LocationName] длина как 60

Итак, для этого мне нужно проверить ввод текста. Как я могу это сделать

1 Ответ

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

В этом примере ожидается, что в первых квадратных скобках [] будет указано Имя, а во втором - Имя_позиции. Оба ограничены соответственно значениями, которые вы упомянули выше. 

$("p.given").on('click paste keydown keyup', function (e) {

  var templateText = $(this).text();
	var fullID = templateText.match(/\[([^\]]+)]/g);
  
  if(fullID.length ==2){
	console.log('All:' + templateText.length + '#Firstname:' + fullID[0].length + '#LocationName:' + fullID[1].length);
    $(this).css("color","black");
	if ((fullID[0].length >= 50 || fullID[1].length >= 60 || templateText.length >= 100) && (e.keyCode !== 46 && e.keyCode !== 8))

  {
		return false;
	}
  } else {
  console.log('please Type the firstname and the LocationName between brackets [] ');
  $(this).css("color","red");
  }
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="test" class="given" contenteditable="true">Test [Denzel Washington] ! Lorem Ipsum is  [Hollywood]. the printing and typesetting.</p>

Примечание. Некоторые события, связанные с кликами / кодами клавиш, не будут работать в мобильных браузерах. Вот почему я попробовал мобильную версию на Codepen: https://codepen.io/bilelh/pen/JjoBRyL

...