IE/Edge浏览器下textarea文本域resize polyfill实例页面

回到相关文章 »

效果：

内联

两个方向拉伸：

水平方向拉伸：

垂直方向拉伸：

块级

两个方向：

动态测试

代码：

CSS代码：

textarea {
    vertical-align: top;
    box-sizing: border-box;
    resize: none;
    overflow: auto;
}
textarea[resize] {
    resize: both;    
}
textarea[resize="vertical"] {
    resize: vertical;    
}
textarea[resize="horizontal"] {
    resize: both;
}

HTML代码：

<h4>内联</h4>
<p>两个方向拉伸：<textarea resize="both"></textarea></p>
<p>水平方向拉伸：<textarea resize="horizontal"></textarea> <textarea resize="horizontal"></textarea></p>
<p>垂直方向拉伸：<textarea resize="vertical"></textarea></p>
<h4>块级</h4>
<p>两个方向：<textarea resize="both" style="display:block;"></textarea></p>
<h4>动态测试</h4>
<p><textarea id="hiddenTest" rows="5" resize="both"></textarea></p>
<p><button id="hiddenBtn">显隐上面textarea元素</button> <button id="createBtn">下面动态创建textarea元素</button></p>

JS代码：

<script src="./resize-polyfill.js"></script>
<script>
// 两个按钮测试代码
hiddenBtn.onclick = function () {
    if (hiddenTest.style && hiddenTest.style.display == "none") {
        // 这里如果display值是空字符串，则IE9不会显示resize拉伸
        hiddenTest.style.display = "inline-block";
    } else {
        hiddenTest.style.display = "none";
    }
};
createBtn.onclick = function () {
    this.parentElement.insertAdjacentHTML('afterend', '<p><textarea resize></textarea></p>');
};
</script>