JavaScript：文本域事件处理

最新推荐文章于 2023-09-02 09:47:08 发布

恩洛

最新推荐文章于 2023-09-02 09:47:08 发布

阅读量1.6k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

15 篇文章

订阅专栏

<!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>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。