避免textarea內容與底部覆蓋框重疊

Question

我試圖在textarea的底部添加覆蓋框。定位覆蓋框很簡單，但現在我想要textarea內容不會覆蓋覆蓋框。

我的第一種方法是添加padding-bottom，以便文本永遠不會到達放置覆蓋框的textarea的底部。但是，當我輸入時，文本將會在它下面。此外，向上滾動會導致相同的不良行爲。

編輯：

迴應部分解決我的問題的答案。我試圖讓textarea看起來儘可能原生，所以邊框顏色在焦點上的變化也是必要的。

.container { 
 
    position: relative; 
 
    width: 110px; 
 
} 
 

 
textarea { 
 
    width: 100%; 
 
    height: 50px; 
 
    resize: none; 
 
} 
 

 
texarea.with-padding { 
 
    padding-bottom: 1em; 
 
} 
 

 
span { 
 
    position: absolute; 
 
    bottom: 5px; 
 
    width: 100%; 
 
    height: 1em; 
 
    background: rgba(255,0,0,0.5); 
 
}

<div class="container"> 
 
    <textarea name="" id="">I want this to never go under the red box.</textarea> 
 
    <span></span> 
 
</div> 
 

 
<div class="container"> 
 
    <textarea class="with-padding" name="" id="">I tried with padding-bottom, but it doesn't work either.</textarea> 
 
    <span></span> 
 
</div>

Answer 1

我終於找到了解決這個謎感謝Saurav Rastogi的和eyetea的答案。兩者都近乎完美，但未能使textarea的焦點處突出顯示其邊框。我已經設法使用outline來保持這種行爲。

我認爲這兩種方法都很有用，因爲它們允許在焦點上使用兩種不同的邊框高光。一個使用div包裝策略，並將其留在裏面，使用非常厚的border-bottom。

/* Inner border on focus solution */ 
 

 
.textarea-wrapper { 
 
    border: 1px solid gray; 
 
    display: inline-block; 
 
} 
 

 
.textarea-wrapper textarea { 
 
    display: block; 
 
    border: none; 
 
} 
 

 
.textarea-wrapper textarea:focus { 
 
    outline: 1px solid green; 
 
    outline-offset: 0; 
 
} 
 

 
.textarea-wrapper .overlay { 
 
    width: 100%; 
 
    height: 20px; 
 
    background: rgba(255, 0, 0, 0.5); 
 
} 
 

 
/* Outer border on focus solution */ 
 

 
textarea.bottom-padded { 
 
    border-bottom: 21px solid rgba(255,0,0,0.5); 
 
    outline: 1px solid gray; 
 
    outline-offset: -1px; 
 
} 
 

 
textarea.bottom-padded:focus { 
 
    outline-color: green !important; 
 
}

<div class="textarea-wrapper"> 
 
    <textarea rows="3">Inner border on focus</textarea> 
 
    <div class="overlay"></div> 
 
</div> 
 

 
<textarea rows="3" class="bottom-padded">Outer border on focus</textarea>

Answer 2

可以使用<div>容器（持有你的文字區域，並覆蓋）爲假冒的邊界，並刪除的textarea邊界。正如下面的代碼片段所示：

$('textarea').on('focus', function() { 
 
    $('.textarea-holder').css('border-color', 'rgba(255, 0, 0, 0.5)'); 
 
}); 
 

 
$('textarea').on('blur', function() { 
 
    $('.textarea-holder').css('border-color', '#333'); 
 
});

.textarea-holder { 
 
    border: 1px solid #333; 
 
    display: inline-block; 
 
} 
 

 
.textarea-holder textarea { 
 
    display: block; 
 
    resize: none; 
 
    border: none; 
 
} 
 

 
textarea:focus { 
 
    outline: none; 
 
} 
 

 
.textarea-holder .overlay { 
 
    width: 100%; 
 
    height: 20px; 
 
    background: rgba(255, 0, 0, 0.5); 
 
} 
 

 
body { 
 
    padding: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="textarea-holder"> 
 
    <textarea rows="6"></textarea> 
 
    <div class="overlay"></div> 
 
</div>

希望這有助於！

Answer 3

所以我繼續寫下來：

1. 刪除了border和復位有些款式的textarea

2. 添加了假邊界到container並刪除了span的定位並將其作爲block元素。

見下面的代碼：

.container { 
 
    position: relative; 
 
    width: 110px; 
 
    border: 1px solid; 
 
} 
 

 
textarea { 
 
    width: 100%; 
 
    height: 50px; 
 
    resize: none; 
 
    border:none; 
 
    outline:none; 
 
    padding: 0; 
 
} 
 

 
.container span { 
 
    display:block; 
 
    width: 100%; 
 
    height: 1em; 
 
    background: rgba(255, 0, 0, 0.5); 
 
}

<div class="container"> 
 
    <textarea name="" id="">I want this to never go under the red box.</textarea> 
 
    <span></span> 
 
</div>

Answer 4

您可以簡單地添加一個bottom-border: 1em到textarea模仿span元素。 這裏是一個工作示例：http://codepen.io/anon/pen/woKyvy#anon-login

.container { 
 
    position: relative; 
 
    width: 200px; 
 
} 
 

 
textarea { 
 
    width: 100%; 
 
    height: 50px; 
 
    border-bottom: 1em solid rgba(255,0,0,0.5); 
 
}

<div class="container"> 
 
    <textarea>Try typing. The cursor will never end up under the red line.</textarea> 
 
</div>