Ограничение текстовой области, чтобы добавить текст больше, чем его высота - PullRequest
Новая
       0

Ограничение текстовой области, чтобы добавить текст больше, чем его высота

0 голосов
/ 28 февраля 2019

У меня есть textarea фиксированных width и height, я не хочу изменять размер textarea и не хочу добавлять к нему скроллер, когда текст больше его высоты.Я хочу ограничить добавление дополнительного текста.

Примечание: свойство maxLength не решит мою проблему, поскольку fontSize и fontFamily могут быть чем угодно, поэтому я не знаю значения maxLength,только width и height из textarea в пикселях

Ответы [ 3 ]

0 голосов
/ 28 февраля 2019 

<!DOCTYPE html>
<html>

<head>
</head>

<body>

  <textarea rows="3" onkeyup="myFunction(this)">
a
</textarea>

  <script>
    function myFunction(textarea) {
      if (textarea.scrollHeight > textarea.clientHeight) {
        console.log('visible')
      } else {
        console.log('not visible');
      }
    }
  </script>

</body>

</html>
0 голосов
/ 01 марта 2019

Спасибо за подсказку.Я искал решение в React, но решение в Jquery тоже помогло.Итак, я пишу решение своего вопроса в реагировать 

enter code here

onPaste(ev) {
  ev.stopPropagation();
  ev.preventDefault();
  const elem = this.textarea;
  const clipboardData = ev.clipboardData || window.clipboardData;
  const pastedData = clipboardData.getData('Text');
  let index = elem.selectionStart;
  for (let i=0; i<pastedData.length; i++) {
    const strChar = pastedData.charAt(i);
    elem.value = elem.value.slice(0, index) + strChar + elem.value.slice(index);
    if (this.textarea && elem.clientHeight < elem.scrollHeight) {
      elem.value = elem.value.slice(0, index) + elem.value.slice(index + 1);
      break;
    }
    index = index + 1;
  }
}

handleTextareaChange(ev) {
  const elem = this.textarea;
  if (elem.clientHeight < elem.scrollHeight) {
    elem.value = elem.value.slice(0, elem.selectionStart - 1) + elem.value.slice(elem.selectionStart);
   }
}



React JSX

<textarea
    title={this.props.tooltip}
    onChange={this.handleTextareaChange}
    onPaste={this.onPaste}
    ref={textarea => {
       this.textarea = textarea;
    }}
    style={{overflowY: "hidden"}}
  />
0 голосов
/ 28 февраля 2019

Попробуйте: 

$("#test1").on("keypress", function(event) {    
    if(($(this).prop("scrollHeight")) > $(this).innerHeight()){
      
      return false;
    }
  })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="test1" rows="2"></textarea>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...