課程
/前端開發
/JavaScript
/人人網評論功能
demo
2014-12-13
源自：人人網評論功能 5-5
正在回答
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? textarea {
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 20px;
? ? ? ? }
? ? </style>
? ? <script type="text/javascript">
? ? ? ? window.onload = function () { ? ?
? ? ? ? ? ? //獲取元素
? ? ? ? ? ? var txt = document.getElementById('txt');
? ? ? ? ? ? var total = document.getElementById('total');
? ? ? ? ? ? txt.onfocus=function(){
? ? ? ? ? ? ? ? this.style.height="80px";
? ? ? ? ? ? }?
? ? ? ? ? ? txt.onblur=function(){
? ? ? ? ? ? ? ? this.style.height="20px";
? ? ? ? ? ? }
? ? ? ? ? ? txt.onkeyup=function(){
? ? ? ? ? ? ? ? var s=this.value.length;
? ? ? ? ? ? ? ? total.innerText=s;
? ? ? ? ? ?
? ? </script>
</head>
<body>
<textarea id="txt"></textarea>
<p>你輸入了<span id="total">0</span>個字</p>
</body>
</html>
舉報
仿人人網評論，讓你的網頁活躍起來，趕快來學習讓功能的實現吧
1 回答demo
3 回答demo
4 回答demo在我的火狐里無法達到此效果
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-03-10
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style type="text/css">
? ? ? ? textarea {
? ? ? ? ? ? width: 200px;
? ? ? ? ? ? height: 20px;
? ? ? ? }
? ? </style>
? ? <script type="text/javascript">
? ? ? ? window.onload = function () { ? ?
? ? ? ? ? ? //獲取元素
? ? ? ? ? ? var txt = document.getElementById('txt');
? ? ? ? ? ? var total = document.getElementById('total');
? ? ? ? ? ? txt.onfocus=function(){
? ? ? ? ? ? ? ? this.style.height="80px";
? ? ? ? ? ? }?
? ? ? ? ? ? txt.onblur=function(){
? ? ? ? ? ? ? ? this.style.height="20px";
? ? ? ? ? ? }
? ? ? ? ? ? txt.onkeyup=function(){
? ? ? ? ? ? ? ? var s=this.value.length;
? ? ? ? ? ? ? ? total.innerText=s;
? ? ? ? ? ? }
? ? ? ? ? ?
? ? ? ? }
? ? </script>
</head>
<body>
<textarea id="txt"></textarea>
<p>你輸入了<span id="total">0</span>個字</p>
</body>
</html>