盡管width：0，Textarea滾動條不會消失；
[英]Textarea scrollbar doesn't disappear despite width:0;
問題描述
Chrome中沒有滾動條，但是在Firefox和IE中，即使元素寬度為0，它也不會消失：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Textarea Scrollbar</title>
<style>
textarea {
height: 200px;
width: 0;
margin: 0;
border: 0;
padding: 0;
}
</style>
</head>
<body>
<textarea id="textarea">
Hello, world!
...
</textarea>
<input type="text" value="0" id="input" oninput="resize();">
<script>
function resize() {
document.getElementById('textarea').style.width = document.getElementById('input').value + 'px';
}
</script>
</body>
</html>
什么原因？ 什么是跨瀏覽器解決方案，因此文本區域的行為類似於Chrome？
2 個解決方案
解決方案1
0 2014-04-25 15:26:18
嘗試overflow:hidden; 在CSS中為文本區域指定的ID
解決方案2
0 2014-04-25 15:58:13
編輯
使用Javascript
//this function attaches eventListener to the element and it is compatible with legacy browsers as well
function attach(element,listener,ev,tf){
if(element.attachEvent) {
//support for older IE (IE7 inclusive)
element.attachEvent("on"+listener,ev);
}else{
//modern browsers
element.addEventListener(listener,ev,tf);
}
}
var newInterval; //we use this to set interval and check say every 200 milliseconds
//whether the *height* of our *textarea* has changed and if it has
//than we set its *overflow* to *auto*, so the *scrollbar* will be
//visible, but when the *height* is *less or equal to 200* we set
//its *overflow* to *hidden*, so the *scrollbar* isn't visible!
var textarea = document.getElementById('textarea');
var input = document.getElementById('input');
//here we check if the value of our input element has changed than we change the width of our textarea
attach(input,'input',function(){
textarea.style.width = input.value + 'px';
},false);
//when our textarea recieves focus (is clicked on) we start running the interval and
//check every 200 milliseconds if the height of the textarea is equal or greater than
//200px we set its overflow to auto so the scrollbar becomes visible, and when the
//height is equal or less than 200px we set our textareas overflow to hidden, so no
//scrollbar is visible
attach(textarea,'focus',function(){
newInterval = setInterval(function(){
height = textarea.scrollHeight;
if(height>=200){
textarea.style.overflow = 'auto'
}else textarea.style.overflow = 'hidden';
},200);
},false);
//here we clear our interval, as our textarea has lost focus
// and there is no need to further run our interval
attach(textarea,'blur',function(){ clearInterval(newInterval); },false);
HTML
<textarea id="textarea">
Hello, world!
...
</textarea>
<input type="text" value="0" id="input" oninput="resize();">
CSS
textarea{
height: 200px;
width: 0;
margin: 0;
border: 0;
padding: 0;
overflow:hidden;
border:1px solid red;
}
Javascript-單擊空白時，左側下拉菜單不會消失，但是盡管代碼相同，右側菜單卻不會消失。 困惑
[英]Javascript - Left dropdown menu doesn't disappear when white space is clicked but the right one does despite identical code. Confused
如何獲得不包含滾動條的layoutUnit的寬度？
[英]How can I get the width of a layoutUnit that doesn't include its scrollbar?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.