JavaScript:文本域事件处理

<!doctype html>
 <html lang = "zh-CN">
 <head>
<!--文本域往往可以输入大量的文字信息,但是在文本域上有一些键盘的处理事件:
onkeydown、onkeypress、onkeyup。-->
<!--限制输入的字数,超过字数不能提交
注意: onkeypress 事件在所有浏览器中不能触发所有按键(例如:ALT, CTRL, SHIFT, ESC) 。
如果只对用户是否已经按下一个按键检测, 可以使用 onkeydown 取代, onkeydown被所有按键触发。
注意: onkeypress 属性不能使用与以下元素: <base>, <bdo>, <br>,
<head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 或<title>。-->


     <meta charset="utf-8">
     <meta name="description" content="this is a checkbox example">
     <meta name="keywords" content="checkbox,html,js">
     <title>文本域事件的测试</title>

     <script type="text/javascript">
         window.onload = function () {
             
             document.getElementById("textArea").addEventListener('keypress',function(){
                 calfontCount();
             },false);

             document.getElementById("textArea").addEventListener('keydown',function(){
                 calfontCount();
             },false);

             document.getElementById("textArea").addEventListener('keyup',function(){
                 calfontCount();
             },false);
         }

         //计算文字个数
         function calfontCount () {
             var textSpan =  document.getElementById("textSpan");
             var textArea =  document.getElementById("textArea");
             var max = 20; //文字总个数
             var cur =  textArea.value.length ; //当前文字个数
             if (cur<= max) {
                 textSpan.innerHTML = "还允许输入"+(max-cur)+"个字";
                 document.getElementById("subBut").disabled = false;
             }else{
                 textSpan.innerHTML = "还允许输入<font color='red'>"+(max-cur)+"</font>个字";
                 document.getElementById("subBut").disabled = true;
             }
         }
     </script>

 </head>
 <body>
     <form action="">
         请输入你自己的评价:
         <div>
             <textarea id="textArea" cols="30" rows="3"></textarea>
             <div><span id="textSpan">还允许输入20个字</span></div>    
         </div>
         <div>
             <input type="submit" id="subBut" value="提交">
         </div>
     </form>
 </body>
 </html>
阅读更多
个人分类: javascript
上一篇JavaScript:下拉列表框的事件处理
下一篇文本框动画
想对作者说点什么? 我来说一句

java'文本域额验证

2010年07月28日 281B 下载

JavaScript事件处理

2008年10月19日 980KB 下载

没有更多推荐了,返回首页

关闭
关闭