jQuery自动增长文本区域与初始文本 [英] jquery auto-grow text area versus initial text

问题描述

有一个非常简单的jquery插件:autotextarea.我想教给它一个新的技巧:调整初始的大小以补偿表单中提供的文本，而不是等待第一次击键.除了onkeyup之外，某种友善的灵魂能否告诉我要添加哪种处理程序?

There's a very simple jquery plugin: autotextarea. I'd like to teach it one little new trick: to resize initially to compensate for text that is provided in the form, rather than waiting for the first keystroke. Can some kind soul please tell me what sort of handler to add to it in addition to the onkeyup?

这是有问题的插件.

仅在初始化函数中添加对grow(this)的调用是行不通的-显然，在调用它时，布局不完整，有效宽度很小，因此它们变得太高了.这是我的修改版本:唯一的更改是对grow的调用.

Just adding a call to grow(this) to the initialization function doesn't work -- apparently, at the time it's called, the layout isn't complete, and the effective width is small, so they get much too tall. Here's my modified version: the only change is the call to grow.

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

编辑:

在document.ready()上运行此命令不起作用，因为尚未计算textarea的cols属性.但是，我想出了一些办法，也许您可​​以帮我清理一下.我没有注意cols，而是使用$(txtArea).width()，然后将其除以包含典型字符的隐藏div的宽度.一切都很好，除了需要在每个页面上都放置隐藏的div.对制造或取消该div有任何建议吗?

Running this at document.ready() does not work, because the cols attribute of the textarea is not calculated yet. However, I came up with something, and perhaps you can help me clean it up. Instead of paying attention to cols, I use $(txtArea).width(), and then divide that by the width of a hidden div that contains a typical character. All is well, except for the need to put the hidden div on every page. Got any suggestions for manufacturing or obviating that div?

典型文本区域HTML:

Typical text area 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>

和相关CSS:

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

推荐答案

我不确定插件的工作原理，但这可能是一个临时解决方案.

I'm not sure exactly how the plugin works, but this could be a make-shift solution.

将textarea设置为自动增长后，将字符动态添加到textarea，以便它将触发插件，然后删除该字符.或者您可能需要模拟一个按键.

After you set the textarea to auto-grow, dynamically add a character to the textarea so it will trigger the plugin, and then remove the character. Or you may need to simulate a keypress, either one.

让我知道您是否需要代码示例.

Let me know if you need a code example.

这篇关于jQuery自动增长文本区域与初始文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！