Ограничить количество строк (строк + нажатие клавиши Enter) в текстовой области плюс показать количество строк - PullRequest
Новая
       16

Ограничить количество строк (строк + нажатие клавиши Enter) в текстовой области плюс показать количество строк

1 голос
/ 29 января 2012

Я ищу способ использовать jquery / html / или даже css для следующих действий.

Моя текстовая область имеет фиксированный размер, 1 размер / тип шрифта, и я хочу иметь возможность выполнять следующие действия.

  • Ограничить количество строк до 18 строк
  • Отображение количества строк, которые пользователь использовал до сих пор (вроде как в твиттерном подходе с символами, но с отображением используемых строк)

Определение строки: Строка для моего проекта - либо когда пользователь нажимает клавишу ввода на клавиатуре и переходит на новую строку, либо ИЛИ, когда в текстовой области создается новая строка / строка путем естественного непрерывного набора текста. в текстовой области. У меня в основном текстовая область фиксированного размера, и пользователь не может выйти за пределы установленных мной ограничений.

Ответы [ 2 ]

1 голос
/ 29 января 2012

Я не буду предоставлять какие-либо фрагменты кода для вашей проблемы, а просто объясню, как я вижу решение. Основывая свой алгоритм на библиотеке font.js javascript, вы можете получить длину в пикселях текста и всех символов в тексте. Если вы используете уникальный шрифт в текстовом поле, вы можете знать, когда строка завершается каждый раз, когда число пикселей в строке равно или меньше фактического количества пикселей, используемых в новой строке. В псевдокоде это будет выглядеть так: 

var textBoxLineInPixels = 300 //or getting the actual number through DOM;

onChangeEvent    {
   var totalNumberOfPixels = getNumberOfPixelsFromElement(idToYourTextBox);
   var numberOfLinesUsed = totalNumberOfPixels / textBoxLineInPixels;
   update(idToYourNumberOfLinesContainer, numberOfLinesUsed);
}

Разделив общее количество пикселей в текстовой области на количество пикселей в строке, вы получите текущее количество строк, используемых в текстовой области.

0 голосов
/ 01 января 2016

Не совсем ответ на вопрос, но это ограничит число / обратный отсчет символов в текстовой области при вводе.

Также удаляются любые нежелательные символы.

CSS: 

<style>
div.textarea-wrap{
    padding: 8px 0px;
    border-radius: 3px;
    postion:relative;
    margin: 5px 0px 15px 0px;
}


textarea#styled_text_area {
    width: 93.5%;
    height: 120px;
    font-size: 12px;
    border: 1px solid slategrey;
    border-radius: 3px;
    padding: 8px 3%;
    font-family: Tahoma, sans-serif;
    background: #E3E9ED;
}


.remaining {
    margin: 3px 0px;
    line-height: 10px;
}

div.remaining p{
    color: lightslategrey;
    float: right;
    margin: 4px 3% 0px 0px;
    float:right;
}

.remaining input{
    width:27px;
    border: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: lightslategrey;
    float:right;
    margin: 0;
}
</style>

Javascript: 

<script> 
function clean(el){
    var textfield = document.getElementById(el);
    var regex = /[^a-z 0-9?!.,]/gi;
    if(textfield.value.search(regex) > -1) {
        textfield.value = textfield.value.replace(regex, "");
        }
}
// Text counter 
var maxAmount = <?php echo($message_input_size);?>;
function textCounter(textField, showCountField) {
    if (textField.value.length > maxAmount) {
        textField.value = textField.value.substring(0, maxAmount);
    } else { 
        showCountField.value = maxAmount - textField.value.length;
    }
}   
</script>

HTML: 

<div class="textarea-wrap">

    <textarea name="ta" id="styled_text_area" rows="6" placeholder="Type here..." onKeyDown="textCounter(this.form.ta,this.form.countDisplay), clean('styled_text_area');" onKeyUp="textCounter(this.form.ta,this.form.countDisplay), clean('styled_text_area');"></textarea>   


    <div class="remaining">
    <p>Characters Remaining</p>
    <input readonly type="text" name="countDisplay" size="3" maxlength="3" value="500"><br><br> 
    </div>
</div>
...