尽管width：0，Textarea滚动条不会消失；

Question

No scrollbar in Chrome, but in Firefox and IE, it doesn't disappear although the element width is 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>

DEMO DEMO

What's the reason? 什么原因？ What's a cross-browser solution so the textarea behaves like in Chrome? 什么是跨浏览器解决方案，因此文本区域的行为类似于Chrome？

Answer 1

Try overflow:hidden; 尝试overflow:hidden; in the css for the text area attributed ID 在CSS中为文本区域指定的ID

Answer 2

EDIT 编辑

DEMO DEMO

Javascript 使用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 HTML

  <textarea id="textarea">
        Hello, world!
        ...
  </textarea>
  <input type="text" value="0" id="input" oninput="resize();">

CSS CSS

textarea{

    height: 200px;
    width: 0;
    margin: 0;
    border: 0;
    padding: 0;
    overflow:hidden;
    border:1px solid red;

}

尽管width：0，Textarea滚动条不会消失；

问题描述

2 个解决方案

解决方案1
0 2014-04-25 15:26:18

解决方案2
0 2014-04-25 15:58:13

尽管width：0，Textarea滚动条不会消失；

问题描述

2 个解决方案

解决方案1 0 2014-04-25 15:26:18

解决方案2 0 2014-04-25 15:58:13

解决方案1
0 2014-04-25 15:26:18

解决方案2
0 2014-04-25 15:58:13