表单调整大小响应问题文本区域答案

【问题标题】：Form Resizing Responsive issue textarea表单调整大小响应问题文本区域
【发布时间】：2013-01-23 11:46:21
【问题描述】：

我的响应式文本区域有问题。在用户尝试扩展表单之前，它可以正常工作（跨越不同的尺寸）（我目前已将其尺寸锁定为高度/最大高度/宽度/最大宽度组合）。这个问题有方法解决吗？我做错了什么 - 以前没有见过这个问题。

HTML

<textarea name="message" id="message" placeholder="Message"></textarea>

CSS

form{
    border: none;
    outline: none;
    text-align: center;
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    background: black;

    /*Android Hack*/
    margin-top: -1px;
    padding-bottom: 2em;
}

    #message
{
    border: none;
    outline: none;
    color: black;

    display: block;
    background: white;
    padding: 1em;
    margin: auto;
    font-size: 1em;
    margin-bottom: 1em;
    font-family: 'Open Sans', sans-serif;

    height: 12em;
    max-height: 12em;

    width: 70%;
    max-width: 70%;

}

抱歉，代码乱七八糟-它们很快就被破解了！ :)
提前致谢！

http://jsfiddle.net/qfYQN/1/

【问题讨论】：

我不明白这个问题，你能解释一下吗？谢谢:)
这有帮助吗？ jsfiddle.net/qfYQN/1 - 对不起，糟糕的解释
我不明白你到底想要实现什么，用户应该能够水平调整文本区域的大小吗？
在css中其实有一个resize属性可以用来禁用用户调整大小的功能。只需设置 resize:none。
所以澄清一下：当调整窗口大小时，文本框会正确地增长和缩小并保持在页面的中心。但是，一旦用户调整了文本框的大小，它就不再正确地缩小和增长了？

标签： html css forms textarea responsive-design

【解决方案1】：

我想不出这个问题的可靠解决方案。

在我看来，您有两个选择：禁用 resize css 属性或使用一些 javascript 在用户调整框大小时将边距重置为自动。

css:

 resize:none;

jquery：不幸的是，没有用于调整文本框大小的事件侦听器，因此这将是最简单的方法：

 $('#message').mouseup(function(){
    $(this).css('margin', 'auto');  
 });

http://jsfiddle.net/WLBde/

否则，您可以设置一个间隔，每 X 秒检查一次文本框的宽度，如果不同，则像上面一样重置边距。

希望这会有所帮助！

【讨论】：

我不知道有一个 css re-size 属性！这清除了一切：）设置“resize：none”，现在它完美地工作了：）谢谢！

【解决方案2】：

我完成了这项工作。我刚刚为文本区域分配了一个消息 ID，然后我添加了这个 css

#message {

    width:100%;

}

【讨论】：