允许textarea调整大小以收缩（不只是增长）元素从其原始/默认大小 [英] Allow a textarea resize to shrink (not just grow) element from its original/default size

问题描述

我试图创建一个 textarea 元素，它有一个程序化定义的原始/默认大小，但用户可以在已定义的限制内调整大小，

I am trying to create a textarea element that has a programmatically-defined original/default size, but which the user can resize within defined limits that allow it to both grow and shrink.

我已尝试设置 resize ， min-width ， max-width 和 width 只允许用户增长 textarea 元素，而不是缩小 。浏览器将允许用户在 width 和 max-width 的范围内调整大小和调整元素大小，而不是在 min-width 和 max-width 的范围。

I have tried setting the resize, min-width, max-width, and width properties of the text-area, but, thus far, this only allows the user to grow the textarea element, not shrink it. The browser will allow the user to size and resize the element within the bounds of width and max-width, not between the bounds of min-width and max-width, as intended.

有没有一种简单的方法来指定默认大小，也不会被视为最小大小？

Is there a simple way of specifying a default size that will not also be treated as a minimum size?

这是我使用的代码：

function textAreaWithDefault(size) {
    var ta = document.createElement("textArea");

    ta.style.resize = "both";
    ta.style.minWidth = "100px";
    ta.style.width = size + "px";    // default size
    ta.style.maxWidth = "500px";

    document.body.appendChild(ta);
} 

纯css和/或javascript解决方案是首选，工作在web套件。

A pure css and/or javascript solution is preferred, but it only has to work on web-kit.

推荐答案

我会查看fittext或类似的脚本：
http://fittextjs.com/

I would look into fittext or similar scripts: http://fittextjs.com/

这正是您的描述。

这篇关于允许textarea调整大小以收缩（不只是增长）元素从其原始/默认大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！