1

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

专辑 -
http://imgur.com/a/9ICnF#0

网站 -
http://pxlprfct.co.uk/

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/

4

2 回答 2

2

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

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

CSS：

 resize:none;

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

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

http://jsfiddle.net/WLBde/

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

希望这可以帮助！

于 2013-01-23T12:16:57.930 回答
-2

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

#message {

    width:100%;

}
于 2016-05-23T07:59:27.730 回答