Question

我的响应式textarea存在问题。它工作正常（跨不同大小），直到用户尝试扩展表单（我目前使用高度/最大高度/宽度/最大宽度组合锁定它的大小）。这个问题有方法解决吗？我做错了什么 - 以前没见过这个问题。

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/

Answer 1

我无法想到解决这个问题的可靠方法。

我看到它的方式，你有两个选择：当用户调整框大小时，禁用resize css属性或使用一些javascript将边距重置为自动。

的CSS：

 resize:none;

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

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

http://jsfiddle.net/WLBde/

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

希望这有帮助！

Answer 2

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

#message {

    width:100%;

}

表格调整响应问题textarea

2 个答案: