Вопрос:
Учитывая этот код:
<textarea rows=»4″ cols=»50″> At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies. </textarea>
Набирается 4 строки.
Однако как бы вы применили CSS для отключения другой строки, когда пользователь нажимает кнопку ввода или когда текст переполняется до 5-й строки?
благодаря
Ответ №1
Использование текстового поля
Слишком ограничить строки и символы в текстовом поле, вы можете использовать мой сценарий, который я только что сделал:
JAVASCRIPT:
function textarealimit(textarea, rows, chars, rowsleft_id, charsleft_id) { var newValue; var valueSegments = textarea.value.split(‘n’); if(rows != undefined && valueSegments.length > rows) { // too many rows newValue = valueSegments.slice(0, rows).join(«n»); } if(chars != undefined && textarea.value.length > chars) { // too many chars if(newValue != undefined) newValue = newValue.substring(0, chars); else newValue = textarea.value.substring(0, chars); } if(newValue != undefined) textarea.value = newValue; if(rowsleft_id != undefined) { if(textarea.value == «») document.getElementById(rowsleft_id).innerHTML = rows; else if(rows — valueSegments.length >= 0) document.getElementById(rowsleft_id).innerHTML = rows — valueSegments.length; } if(charsleft_id != undefined) { if(chars != undefined) document.getElementById(charsleft_id).innerHTML = chars — textarea.value.length; } }
HTML:
<textarea onkeydown=»textarealimit(this, 4, 43, ‘textarea_rowsleft’, ‘textarea_charsleft’);» onkeyup=»textarealimit(this, 4, 43, ‘textarea_rowsleft’, ‘textarea_charsleft’);» onpaste=»textarealimit(this, 4, 43, ‘textarea_rowsleft’, ‘textarea_charsleft’);» rows=»4″ style=»overflow: hidden; resize: none;»> </textarea> <div> Rows left: <span id=»textarea_rowsleft»>4</span> Characters left: <span id=»textarea_charsleft»>43</span> </div>
Если вы используете HTML5, вы можете даже ограничить символы атрибутом maxlength в maxlength управления textarea. Если вы не хотите показывать строки или символы слева, просто используйте onkey….=»textarealimit(this, 4, 43);» , Вы можете даже ограничивать строки, используя onkey….=»textarealimit(this, 4);» ,
Вот демо для вас: http://jsfiddle.net/AmFnA/9/
Единственное ограничение появляется, когда пользователь получает новые строки путем автоматического прерывания строки из-за ограничения ширины, поэтому без нажатия ENTER, потому что он НЕ будет считаться новой строкой. Кроме того, вы должны использовать keydown (когда пользователь нажимает и удерживает это все время), keyup (когда пользователь отпускает, срабатывает даже при нажатии ENTER) и onpaste (для richtclick → paste) всегда.
Спасибо Guilherme за то, что он напомнил мне о пастообразной части своей более короткой версией этого решения.
Использование нескольких полей ввода
Теперь есть еще одна альтернатива Юкки. Вы можете использовать поле ввода для каждой строки. Это предотвратит автоматическое получение прерываний линии. Здесь вы можете даже прослушать клавиши, чтобы отправить курсор в следующее или предыдущее поле в правильных условиях.
Создайте свои строки с полями ввода в вашем HTML:
<div class=»rowfield_collection»> <input id=»rowfield1″ class=»rowfield top» onkeydown=»rowfieldkeynav(event, undefined, ‘rowfield2’);» type=»text» size=»35″ maxlength=»30″ /> <input id=»rowfield2″ class=»rowfield middle» onkeydown=»rowfieldkeynav(event, ‘rowfield1’, ‘rowfield3’);» type=»text» size=»35″ maxlength=»30″ /> <input id=»rowfield3″ class=»rowfield middle» onkeydown=»rowfieldkeynav(event, ‘rowfield2’, ‘rowfield4’);» type=»text» size=»35″ maxlength=»30″ /> <input id=»rowfield4″ class=»rowfield bottom» onkeydown=»rowfieldkeynav(event, ‘rowfield3’, undefined);» type=»text» size=»35″ maxlength=»30″ /> </div>
Как вы видите, каждое поле ввода получило свой собственный идентификатор, и вы ссылаетесь на предыдущее и следующее поле ввода в вызове rowfieldkeynav.
Чтобы создать стиль и выглядеть как текстовое поле, вы можете использовать этот CSS:
.rowfield { margin: 0 0 -1px 0; display: block; } .rowfield.top { border-bottom: 0; } .rowfield.middle { border-top: 0; border-bottom: 0; } .rowfield.bottom { border-top: 0; }
И, наконец, функция JAVASCRIPT:
function rowfieldkeynav(e, before_id, after_id) { var evtobj = window.event ? event : e //distinguish between IE explicit event object (window.event) and Firefox implicit. var unicode = evtobj.charCode ? evtobj.charCode : evtobj.keyCode; if(before_id != undefined && e.currentTarget.value.length == 0 && unicode == 08) { // BACKSPACE document.getElementById(before_id).focus(); } else if(after_id != undefined && unicode == 13 || e.currentTarget.value.length >= e.currentTarget.maxLength) { // ENTER or end of row reached document.getElementById(after_id).focus(); } }
Он перейдет в предыдущее поле ввода, когда текущее поле ввода пуст, и вы нажмете BACKSPACE. Он перейдет в следующее поле ввода, когда вы нажмете ENTER или достигнете длины maxlength.
И снова, вот демо для вас: http://jsfiddle.net/6KVMS/2/
Единственным недостатком этого метода является:
- Он перепрыгнет в новую строку посредине слова, поэтому он не примет текущее слово с вами в новое поле ввода.
- При использовании мыши вы не можете выбрать более одной строки.
- Вы можете перейти в следующие строки, нажав там
- Если вы удалите строку над другой заполненной строкой, текст не будет подниматься
- IE8 и perhabs немного кричат: он не перейдет к следующему полю, когда строка заполнена
Ответ №2
Для ограничения строк (строк) используйте javascript
См. Пример
(function () { var a = document.getElementById(«txtField»), limit = 4;//Define max lines limit function limitLines() { var l = a.value.replace(/rn/g, «n»).replace(/r/g, «»).split(/n/g);//split lines if (l.length > limit) { a.value = l.slice(0, limit).join(«n»); } } function paste() {//onpaste needs timeout setTimeout(limitLines, 1); } limitLines(); //Like onload a.onkeyup = limitLines; a.onpaste = paste; })();<textarea rows=»4″ cols=»50″ id=»txtField»>1 2 3 4</textarea>Ответ №3
Вы можете сделать что-то подобное в CSS:
textarea { overflow:hidden; resize:none; }
Это отключит возможность изменения размера текстового поля и скрывает все, кроме указанного количества строк.
Кроме того, вы можете ограничить количество символов для текстового maxlength через maxlength (Spec), что возможно с HTML5.
Ответ №4
Вы не можете устанавливать такие ограничения в CSS. Вы можете установить максимальное количество символов в HTML, но это не то же самое. Вы можете использовать JavaScript, который подсчитывает строки и налагает ограничения.
Как правило, лучший подход, по-видимому, заключается в том, чтобы избежать проблемы: вместо элемента textarea используйте четыре input элемента. Недостатком является то, что пользователю нужно перейти к следующему полю, а не просто нажать Enter.
Ответ №5
Можно maxlength атрибут HTML maxlength, но HTML, CSS и JavaScript могут быть взломаны. Убедитесь, что проверка на стороне Sever. Клиентская сторона также должна использоваться, но не будет препятствовать потенциальной проблеме.
