文本区域滚动条没有't消失，尽管宽度为:0;

Textarea scrollbar doesn't disappear despite width:0;

本文关键字：滚动条 区域 文本 消失      更新时间：2023-09-26

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中表现得像？

在css中为文本区域属性ID 尝试overflow:hidden;

编辑

演示

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;
}
相关文章：