<!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); //針對IE 6/7/8的延遲, 否則有時會有一個字符的出入

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

            }

        };

    </script>

</head>

<body>

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

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

</body>

</html>

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

您可能感興趣的文章:

相關(guān)文章

JavaScript數(shù)組去重和扁平化函數(shù)介紹
這篇文章主要介紹了JavaScript數(shù)組去重和扁平化函數(shù)，數(shù)組扁平化又稱數(shù)組降維，下面文章圍繞數(shù)組去重和扁平化函數(shù)得相關(guān)資料展開內(nèi)容,需要的朋友可以參考一下
2021-12-12
AngularJS+Bootstrap實(shí)現(xiàn)多文件上傳與管理
這篇文章主要為大家詳細(xì)介紹了AngularJS+Bootstrap實(shí)現(xiàn)多文件上傳與管理，對上傳文件進(jìn)行加載與刪除操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
javascript實(shí)現(xiàn)復(fù)選框選中屬性
本文給大家介紹的是一篇國外網(wǎng)友寫的博客，講解的是關(guān)于實(shí)現(xiàn)復(fù)選框選中屬性的問題，感覺非常不錯，翻譯過來推薦給大家，希望小伙伴們能夠喜歡。
2015-03-03
輕松掌握J(rèn)avaScript裝飾者模式
這篇文章主要幫助大家輕松掌握J(rèn)avaScript裝飾者模式，告訴大家什么是js裝飾者模式，感興趣的小伙伴們可以參考一下
2016-08-08
小程序?qū)崿F(xiàn)搜索框功能
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)搜索框功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
理解JavaScript中window對象的一些用途
這篇文章主要介紹了理解JavaScript中的window對象,本文通過實(shí)例代碼詳細(xì)介紹Window對象的一些重要用途，需要的朋友可以參考下
2022-07-07
javascript重復(fù)綁定事件造成的后果說明
最近在修改百度地圖開源的東西，想把里面耦合在一起的代碼給拆分出來。拆解之后，發(fā)現(xiàn)了一些坑爹的問題。邏輯上沒有問題的情況下，該出現(xiàn)的效果沒有出現(xiàn)
2013-03-03
微信小程序h5頁面跳轉(zhuǎn)小程序的超詳細(xì)講解
開發(fā)中涉及到一個需求,就是從一個預(yù)約票購買的頁面需要跳轉(zhuǎn)到?小程序,下面這篇文章主要給大家介紹了關(guān)于微信小程序h5頁面跳轉(zhuǎn)小程序的超詳細(xì)講解,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
JavaScript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后層展開效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊后層展開效果的方法,可實(shí)現(xiàn)點(diǎn)擊文字緩慢展開層的效果,具有一定參考借鑒價值,需要的朋友可以參考下
2015-05-05
js代碼延遲一定時間后執(zhí)行一個函數(shù)的實(shí)例
下面小編就為大家?guī)硪黄猨s代碼延遲一定時間后執(zhí)行一個函數(shù)的實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02