Вопросы Теги

jQuery автовыращивает текстовую область по сравнению с первоначальным текстом

Существует очень простой плагин jQuery: автотекстовая область. Я хотел бы преподавать этому один небольшой новый прием: изменить размер первоначально для компенсации текста, который предоставлен в форме, вместо того, чтобы ожидать первого нажатия клавиши. Некоторая добрая душа может сказать мне какой обработчик добавлять к нему в дополнение к onkeyup?

Вот рассматриваемый плагин.

Просто добавление вызова для роста (это) до функции инициализации не работает - по-видимому, в то время, когда это называют, макет не полон, и эффективная ширина является маленькой, таким образом, они становятся слишком высокими. Вот моя измененная версия: единственное изменение является вызовом к grow.

//Public Method
jQuery.fn.autoGrow = function(){
    return this.each(function(){
        setDefaultValues(this);
        grow(this);
        bindEvents(this);
    });
};

Править:

Выполнение этого в document.ready () не работает, потому что атрибут седел текстовой области еще не вычисляется. Однако я придумал что-то, и возможно можно помочь мне очистить его. Вместо уделения внимания cols, Я использую $ (txtArea) .width () и затем делю это на ширину скрытого отделения, которое содержит типичный символ. Все хорошо, за исключением потребности поместить скрытое отделение на каждой странице. Получил какие-либо предложения для производства или устранения того отделения?

Типичная текстовая область HTML:

И соответствующий CSS:

textarea {
    width: 100%;
    font-family: Arial, simsun;
    font-size: 16px;
}

5
задан bmargulies 4 July 2010 в 01:56
поделиться

3 ответа

Я не уверен, как именно работает плагин, но это может быть временным решением.

После того, как вы установите для текстовой области режим автоматического роста, динамически добавьте символ в текстовую область, чтобы он вызвал срабатывание плагина, а затем удалите символ. Или вам может понадобиться имитировать нажатие клавиши, в любом случае.

Дайте мне знать, если вам нужен пример кода.

1
ответ дан 15 December 2019 в 06:14
поделиться

Вы можете сделать это запускать, когда макет завершен, вот так: 

$(document).ready(function() {
   // Code to run once document is ready
});

Или вы можете использовать сокращенную запись, которая делает то же самое: 

$(function(){
   // Code to run once document is ready
});

Просто оберните его внутри этих двух строк, и он должен работать.

1
ответ дан 15 December 2019 в 06:14
поделиться

Кажется, я нашел вашу проблему... вам нужно определить строки и столбцы в textarea:

<textarea rows="5" cols="40" name="text[0]">歐洲 聯盟 研究 論壇 研討會 議程表 主題 : 歐盟 新憲 的 困境 與 挑戰 日期 : 九十四 年 九月 二日 ( 星期五 ) 09 : 00~ 13 : 30 地點 : 台北市 福華 大 飯店 四 樓 CR 403 ( 台北市 仁愛路 三 段 160 號 ) 主辦 單位 : 歐洲 聯盟 研究 論壇 ( European Union Research Forum , EURF ) 國立 政治 大學 國際 關係 研究 中心 起迄 時間 流程09 : 00 -09 : 10 報 到 09 :10 -09 : 20 開場 林碧炤 ( 政治 大學 副校 長 ) 9 : 20 - 10 : 20 第一 場 : 歐盟 公投 後 的 衝突 主持人 尤清 ( 立法委員 ) 引言人 1. </textarea>

Без этих параметров я получал ширину столбцов по умолчанию и высоту строк по умолчанию -1.

Также вам придется удалить width: 100% из CSS, так как это испортит функциональность

Ну, поскольку у меня ОКР, я переписал плагин (demo).

Теперь он должен добавлять приблизительное количество столбцов в текстовую область, основываясь на ширине ее родителя (лучше всего он работает, когда ширина textarea css равна 100%). Просто скопируйте скрипт из левой части демо и сохраните его в файл, назовите его следующим образом:

$(document).ready(function(){
  $("textarea").autoGrow(true);
});

и убедитесь, что ширина textarea также равна 100%... базовый CSS:

textarea {
 width: 100%;
 height: auto;
 overflow: hidden;
 font-family: Arial, simsun;
 font-size: 16px;
}

Назовите мне, если возникнут проблемы.

1
ответ дан 15 December 2019 в 06:14
поделиться
Другие вопросы по тегам:

Похожие вопросы: