快捷導(dǎo)航

JS實(shí)現(xiàn)自適應(yīng)高度表單文本框的方法

更新時(shí)間：2015年02月25日 10:18:37 作者：代碼家園

這篇文章主要介紹了JS實(shí)現(xiàn)自適應(yīng)高度表單文本框的方法,實(shí)例分析了針對(duì)IE內(nèi)核與非IE內(nèi)核下的javascript控制文本框樣式的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)自適應(yīng)高度表單文本框的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>JS實(shí)現(xiàn)自適應(yīng)高度的表單文本框</title>

    <style type="text/css">

        #shadow, #text { font: 12px/16px Arial; width: 200px; overflow: hidden; height: 16px; }

        #shadow { position: absolute; border-width: 0px; padding: 0px; visibility: hidden; }

        #text { resize: none; }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var text = document.getElementById("text"); //用戶看到的文本框

            var shadow = document.getElementById("shadow"); //隱藏的文本框

            text.oninput = //非IE的

            text.onpropertychange = //IE的

            onchange;

            function onchange() {

                shadow.value = text.value;

                setHeight();

                setTimeout(setHeight, 0); //針對(duì)IE 6/7/8的延遲, 否則有時(shí)會(huì)有一個(gè)字符的出入

                function setHeight() { text.style.height = shadow.scrollHeight + "px"; }

            }

        };

    </script>

</head>

<body>

    <textarea id="text"></textarea>

    <textarea id="shadow"></textarea>

</body>

</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js跳轉(zhuǎn)頁面方法總結(jié)
本篇文章主要是對(duì)js跳轉(zhuǎn)頁面方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-01-01
js設(shè)置文字顏色的方法示例
這篇文章主要介紹了js設(shè)置文字顏色的方法,涉及JS頁面元素樣式操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-12-12
關(guān)閉時(shí)刷新父窗口兩種方法
這篇文章主要介紹了刷新父窗口兩種方法,需要的朋友可以參考下
2014-05-05
hammer.js實(shí)現(xiàn)圖片手勢(shì)放大效果
這篇文章主要為大家詳細(xì)介紹了hammer.js實(shí)現(xiàn)圖片手勢(shì)放大效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
微信小程序BindTap快速連續(xù)點(diǎn)擊目標(biāo)頁面跳轉(zhuǎn)多次問題處理
這篇文章主要介紹了微信小程序BindTap快速連續(xù)點(diǎn)擊目標(biāo)頁面跳轉(zhuǎn)多次問題處理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-04-04
JavaScript與C# Windows應(yīng)用程序交互方法
JavaScript與C# Windows應(yīng)用程序交互方法...
2007-06-06
ES6使用Set數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)數(shù)組的交集、并集、差集功能示例
這篇文章主要介紹了ES6使用Set數(shù)據(jù)結(jié)構(gòu)實(shí)現(xiàn)數(shù)組的交集、并集、差集功能,結(jié)合實(shí)例形式分析了ES6中Set數(shù)據(jù)結(jié)構(gòu)的相關(guān)函數(shù)與實(shí)現(xiàn)數(shù)組交集、并集、差集的相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10
JavaScript緩動(dòng)動(dòng)畫函數(shù)的封裝方法
這篇文章主要為大家詳細(xì)介紹了JavaScript緩動(dòng)動(dòng)畫函數(shù)的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
Js如何判斷客戶端是PC還是手持設(shè)備簡(jiǎn)單分析
在工作過程中，許多朋友會(huì)經(jīng)常用到j(luò)s判斷客戶端是PC還是手持設(shè)備，今天將提供以下方法，需要的朋友可以參考下
2012-11-11
JavaScript在IE和Firefox瀏覽器下的7個(gè)差異兼容寫法小結(jié)
盡管那需要用長(zhǎng)串的、沉悶的不同分支代碼來應(yīng)付不同瀏覽器的日子已經(jīng)過去，偶爾還是有必要做一些簡(jiǎn)單的區(qū)分和目標(biāo)檢測(cè)來確保某塊代碼能在用戶的機(jī)器上正常運(yùn)行。
2010-06-06