知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    textarea还剩余字数统计//支持复制粘贴统计字数

    作者:佳明妈 来源:jquery特效 2014-10-10 人气:
    textarea还剩余字数统计,支持复制粘贴的时候统计字数,textarea剩余字数统计完整js演示请在演示中查看源代码或者下载查看。如果你不关心js倒地是怎么写的, 你只管用就行了。

    textarea还剩余字数统计,支持复制粘贴的时候统计字数,下文不适合高手观看,适合不是很熟悉js的朋友看。你也可以直接看演示。

    使用方法:

    步骤一、
    html结构类似如下:
    <div class="wordCount" id="wordCount">
        <textarea placeholder="textarea还剩余字数统计"></textarea>
        <span class="wordwrap"><var class="word">200</var>/200</span>
    </div>
    注意:结构其实你可以任意构建,只要有textarea和展示总字数的节点即可。具体的妙用看下面的js解说部分

    步骤二、
    通常为了不让js阻塞页面加载,会把js文件放到页面最后,这样会让js晚一点加载到。

    如果没有使用jquery请引入jquery文件,如下,我引用的是新浪的cdn加速的jquery文件
    <script src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.min.js"></script>

    步骤三、
    textarea还剩余字数统计jquery调用方法如下:
    //先选出 textarea 和 统计字数 dom 节点
      $(function(){
            //先选出 textarea 和 统计字数 dom 节点
            var wordCount = $("#wordCount"),
                textArea = wordCount.find("textarea"),
                word = wordCount.find(".word");
            //调用
            statInputNum(textArea,word);
        });
    注意这里的id和类名是和上面的html结构对应的,当然你要根据你的实际情况给改一下。 这里之所以用三行去声明变量,是因为可以少让jquery少查询一次(你要让你的jquery执行的更快,最有效的办法就是尽量减少不必要的查询),同时也更清晰。

    注:textarea剩余字数统计完整js演示请在演示中查看源代码或者下载查看。如果你不关心js倒地是怎么写的, 你只管用就行了。

    ↓ 查看全文

    textarea还剩余字数统计//支持复制粘贴统计字数由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    textarea还剩余字数统计//支持复制粘贴统计字数-最新评论