• 技术文章 >web前端 >js教程

    实例详解jquery实现限制textarea输入字数

    小云云小云云2017-12-29 10:41:43原创537
    jquery怎么实现限制textarea输入的字数呢?本文主要为大家详细介绍了jquery实现限制textarea输入字数的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

    有需要的朋友可以参考一下我写的例子,当然如果有误,也希望大家能及时指出来,大家共同学习进步。


    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>textarea 限制字数</title>
     <style>
      .container{
       position: relative;
       width: 730px;
      }
      .container span{
       position: absolute;
       bottom: 20px;
       right: 30px;
      }
     </style>
    </head>
    <body>
     <p class="container">
      <textarea name="content" id="content" cols="100" rows="10"></textarea>
      <span>0/10</span>
     </p>
     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
     <script>
      $(function(){
        /**
        * textarea 限制输入字数
        * @param string str 类名或ID
        * @param number num 限制输入的字数
        */
       function limitImport(str,num){
        $(document).on('input propertychange',str,function(){
         var self = $(this);
         var content = self.val();
         if (content.length > num){
          self.val(content.substring(0,num));
         } 
         self.siblings('span').text(self.val().length+'/'+num);
        });
       }
    
       //用法示例
       limitImport('#content',10);
    
      })
     </script>
    </body>
    </html>

    相关推荐:

    html的<textarea>怎么使用

    实例详解JavaScript如何给Textarea文本框添加行号

    html中textarea输入框提示文字必须添加默认内容的完美解决

    以上就是实例详解jquery实现限制textarea输入字数的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery 限制 实现
    上一篇:实例讲解jQuery实现的文字逐行向上间歇滚动效果 下一篇:jquery实现用户登陆界面技术解答
    千万级数据并发解决方案

    相关文章推荐

    • 浅析Angular变更检测机制,聊聊如何进行性能优化?• JavaScript对象的构造函数和new操作符(实例详解)• Angular知识点分享:聊聊表单、管道、绑定、指令、通信和周期• 深入浅析Node.js中常见的内置模块• 深入聊聊node.js中的EventEmitter
    1/1

    PHP中文网