JQ实现统计文本框剩余字数

效果图：

代码如下，复制即可使用：

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>使用JQ实现统计剩余字数</title>

   <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<textarea name="" id="" cols="100" rows="30"></textarea>

<span>你还可以输入<strong style="color:red;">140</strong>个字</span>

<script>

    var maxLength = 140;

    $('textarea').keyup(function(){

        var L = $(this).val().length;

        $('strong').text(maxLength-L);//总字数减去输入的字数

        if(parseInt($('strong').text())<0){

            $('strong').text('0'); //如果输入文字小于0 则文本显示为0

            //alert($(this).val()）;

            var val1 = $(this).val().substr(1,140);//截取输入长度

            //substr（不推荐使用，ECMAScript没有标准化substr()方法）

            $(this).val(val1);

        }

    })

</script>

</body>

</html>

如果有更好的方法，可以和我们大家一起分享哦，如有错误，欢迎联系我改正，非常感谢！！！

使用JQ实现统计剩余字数的更多相关文章

  1. textarea还剩余字数统计

    <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...

  2. textarea还剩余字数统计，支持复制粘贴的时候统计字数

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. js 实现textarea剩余字数统计

    1 针对textarea剩余字数统计 2 <div class="fankui-textarea"> 3 <span>留言:</span> &l ...

  4. JQ限制输入字数，并提示剩余字数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 如何实现textarea中获取动态剩余字数的实现

    工作中遇到一个案例,之前没有写过,今儿啃了半个下午硬是给写出来,灰常又成就感!当然对于js大牛来说这根本不算啥,但是对于我自己的js能力又向前迈出一小步. 案例介绍:我们常见到有的网站有textare ...

  6. JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)

    一.实现效果: 为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数. html & JS: <div> <textare ...

  7. 文本域textarea显示输入剩余字数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. PHP 中如何正确统计中文字数

    PHP 中如何正确统计中文字数?这个是困扰我很久的问题,PHP 中有很多函数可以计算字符串的长度,比如下面的例子,分别使用了 strlen,mb_strlen,mb_strwidth 这个三个函数去测 ...

  9. Javascript实现真实字符串剩余字数提示

    //文本框剩余字数提示(字符大小) function textLimitCheckSj(thisArea, maxLength, SpanId) { var str = thisArea.value; ...

随机推荐

  1. 进度条（Progressbar）

    进度条(Progressbar) 提供如下一些样式改变进度条的外观 @android:style/Widget.ProgressBar.Horizontal(水平进度条) @android:style ...

  2. Flutter的教程:ListView

    本文学习一下列表widget,是最常见的需求 在Flutter中,用ListView来显示列表项,支持垂直和水平方向展示,通过一个属性我们就可以控制其方向 1.水平的列表 2.垂直的列表 3.数据量非 ...

  3. Pwn Heap With Tcache

    Pwn Heap With Tcache 前言 glibc 2.26 开始引入了 tcache , 相关的 commit 可以看 这里 .加入 tcache 对性能有比较大的提升,不过由于 tcach ...

  4. Android技术博客精华汇总

    MVC/MVP/MVVM/MVPVM 更好的架构设计 MVC,MVP 和 MVVM 的图示 http://www.apkbus.com/blog-822721-68034.html Android架构 ...

  5. linux中文字体

     ◆ 背景说明 报表,在windows下,展现.导出都正常,在linux下,字体变大了.比如,单元格的大小设计好后,里面的字当好能一行显示完,将报表放到linux下后,字变大了,一行显示不完了,变 ...

  6. RecyclerView分隔线定制

    分割线我们利用RecyclerView的addItemDecoration(ItemDecoration fromHtml) 新建一个类来看看到底是什么: public class CategoryI ...

  7. springboot学习入门之一---基本了解

    1springboot基本了解 1.1概述 Spring Boot不是一门新技术,本质上就是spring. 特性: 1) 零配置(或很少配置) 2) 四个核心:(ASCA) 3.1)自动配置:spri ...

  8. SQL Server 索引知识-应用,维护

    创建聚集索引 a索引键最好唯一(如果不唯一会隐形建立uniquier列(4字节)确保唯一,也就是这列都会复制到所有非聚集索引中) b聚集索引列所占空间应尽量小(否则也会使非聚集索引的空间变大) c聚集 ...

  9. python modules and packages

    https://realpython.com/python-modules-packages/ 在软件开发中,一个module是具有一些相关功能的软件集合,比如,当你在开发一个游戏时,可能会有一个模块 ...

  10. 转：MVC框架

    MVC框架是什么 MVC (Modal View Controler)本来是存在于Desktop程序中的,M是指数据模型,V是指用户界面,C则是控制器.使用MVC的目的是将M和V的实现代码分离,从而使 ...