2013-04-05 1 views
2

Как найти длинный текст в текстовой области, заключенной в две или более строк?Как найти текст, заключенный в текстовую область, в несколько строк?

Я не говорю о новых строковых символах, как обсуждалось here.

Я знаю плагин Textarea Line Count

Любой простой метод?

+5

Насколько простоты использования, я не подумайте, что вы сможете найти более простое решение, чем подключенный плагин. Поскольку обертка строк основана на размере текстовой области, вам почти наверняка придется вычислять максимальное количество символов, которые может содержать строка, в зависимости от ширины текстового поля и ширины шрифта, а затем делать какие-то вычисления. Немоношинные шрифты усложняют это. Что вы считаете более простым, чем плагин Textarea Line Count? – crush

+1

Я считал создание временного div с тем же стилем и измерением высоты этого, но из-за различий браузера это не точно. Не уверен, что это будет стоить проблемы. Для получения дополнительной информации см. Http://stackoverflow.com/a/3697221/1306809 –

ответ

3

Я экспериментировал на это и придумал хак, который включает в себя следующее:

  1. Отключение текста-обертку в текстовое поле (плюс отключить дополнение)

  2. Проверяется TextArea-х scrollWidth больше чем это width.

Основная логика я использовал в том, что если текст охватывает несколько строк, это означает, что, когда упаковка выключен, мы должны получить горизонтальную полосу прокрутки.

Demo: http://jsfiddle.net/fnG3d/

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

function checkMulti(id) { 
    var ta = $('#'+id), multi = false; 

    // disable wrapping, padding and enable horiz scoll 
    ta.addClass('nowrap'); 

    // check if there is anything to be scrolled horizontally (means multi-lines otherwise) 
    multi = (ta[0].scrollWidth > ta.width()); 

    // checking done. remove the class. 
    ta.removeClass('nowrap'); 

    alert('Spread over multiple-lines: ' + multi); 
} 

/* the nowrap class */ 
.nowrap { 
    overflow-x: scroll; 
    white-space: nowrap; 
    padding: 0; 
}