jquery área de texto de crecimiento automático versus texto inicial

Question

Hay un plugin de jquery muy simple: autotextarea. Me gustaría enseñarle un pequeño truco nuevo: cambiar el tamaño inicialmente para compensar el texto que se proporciona en el formulario, en lugar de esperar la primera pulsación de tecla. ¿Puede algún alma amable por favor decirme qué tipo de controlador agregarle además de la onkeyup?

Aquí está el plugin in question.

Simplemente agregando una llamada para crecer (esto) a la función de inicialización no funciona - al parecer, en el momento en que se llama, el diseño no está completo, y el ancho efectivo es pequeño, por lo que obtienen demasiado alto. Aquí está mi versión modificada: el único cambio es la llamada al grow.

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

EDITAR:

La ejecución de este en document.ready() no funciona, porque el atributo cols del área de texto no se calcula todavía. Sin embargo, se me ocurrió algo, y tal vez puedas ayudarme a limpiarlo. En lugar de prestar atención a cols, uso $ (txtArea) .width(), y luego lo divido por el ancho de un div oculto que contiene un caracter tipico. Todo está bien, excepto por la necesidad de poner el div oculto en cada página. ¿Tienes alguna sugerencia para fabricar u obviar ese div?

típica área de texto HTML:

<textarea 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> 

y CSS relevante:

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

Answer 1

no estoy seguro exactamente cómo funciona el plugin, pero esto podría ser una solución improvisada.

Después de configurar el área de texto para que crezca automáticamente, agregue dinámicamente un carácter al área de texto para que active el complemento y luego elimine el carácter. O puede necesitar simular una pulsación de tecla, ya sea una.

Avíseme si necesita un ejemplo de código.

Answer 2

puede hacer que este plazo cuando el diseño se completa de esta manera:

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

o puede utilizar la notación abreviada, que hace exactamente lo mismo:

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

Sólo se envuelve en el interior esas dos líneas y debería funcionar.

Answer 3

Creo que he encontrado el problema ... es necesario definir las filas y columnas en el área de texto:

<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> 

Sin esos ajustes, que estaba recibiendo ancho de columna predeterminado y la altura de fila predeterminado de -1.

También, usted tiene que quitar el width: 100% de la CSS, ya que se hace un lío la funcionalidad

---

Bien, porque tengo TOC, me volvió a escribir el plugin (demo).

Ahora debería agregar un número aproximado de columnas al área de texto en función del ancho de su elemento principal (funciona mejor cuando el ancho de la superficie del texto es 100%). Sólo tienes que copiar el script desde el lado izquierdo de la demo y lo guarda como un archivo, lo llaman de la siguiente manera:

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

y asegúrese de que el ancho de área de texto también es 100% ... CSS básica:

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

Hollar si encuentra algún problema.