最近在设计写博客功能时，涉及到留言框输入字数限制，需要给用户剩余数字提示。

参考文章：https://www.cnblogs.com/crazytrip/p/4968230.html

实现效果：

源码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>统计输入剩余字数</title>

</head>

<body>

    <div>

        <textarea cols="50" rows="5"  name="content" id="content" onkeyup="javascript:checkWords(this);"

            onmousedown="javascript:checkWords(this);"></textarea>

    </div>

    <div>

        还可以输入<span style="font-family: Georgia; font-size: 26px;" id="wordCheck">50</span>个汉字

    </div>

    <script>

        var maxstrlen = 50;

        function Q(s) {

            return document.getElementById(s);

        }

        function checkWords(c) {

            len = maxstrlen;

            var str = c.value;

            myLen = getStrleng(str);

            var wck = Q("wordCheck");

            if (myLen > len * 2) {

                c.value = str.substring(0, i + 1);

            } else {

                wck.innerHTML = Math.floor((len * 2 - myLen) / 2);

            }

        }

        function getStrleng(str) {

            myLen = 0;

            i = 0;

            for (; (i < str.length) && (myLen <= maxstrlen * 2); i++) {

                if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128)

                    myLen++;

                else

                    myLen += 2;

            }

            return myLen;

        }

    </script>

</body>

</html>

JS实现提示文本框可输入剩余字数的更多相关文章

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

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

  2. js正则表达式限制文本框只能输入数字,小数点,英文字母

    1.文本框只能输入数字代码(小数点也不能输入)<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafter ...

  3. JS 正则表达式 控制文本框只能输入中文、英文、数字与指定特殊符号

    JS 正则表达式 控制文本框只能输入中文.英文.数字与指定特殊符号(屏蔽表情输入) onkeyup:释放键盘事件 onpaste:粘贴事件 oncontextmenu :鼠标右击事件 只能输入中文: ...

  4. JS控制文本框textarea输入字数限制

    <html> <head> <title>JS限制Textarea文本域字符个数</title> <meta http-equiv="C ...

  5. JQuery+AJAX实现搜索文本框的输入提示功能

    平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...

  6. js控制文本框只能输入中文、英文、数字与指定特殊符号.

    先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...

  7. js限制文本框只能输入数字方法小结(转)

    这篇文章主要分享下js代码限制文本框中只能输入数字的多个实例,学习下js控制文本框中输入数字的方法,需要的朋友可以参考下   有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数 ...

  8. Jquery / js 判断数据类型方法（限制文本框类型输入）

    当想要判断文本框中的值是否为自己想要的类型时,可以通过一些方法作出判断,这里对于光标离开文本框时判断文本框中输入的是否是数值类型,如果不是,做出提示 $("#WORKYEARS") ...

  9. js限制文本框只能输入整数或者带小数点[转]

    这篇文章是关于js限制文本框只能输入整数或者带小数点的内容,以下就是该内容的详细介绍. 做表单验证的时候是否会碰到验证某个输入框内只能填写数字呢,仅允许输入整数数字或者带小数点的数字.下面这段代码也许 ...

  10. C# 使用js正则表达式，让文本框只能输入数字和字母，最大长度5位

    使用js正则表达式,让文本框只能输入数字和字母,最大长度5位,只需要加个onkeyup事件,即可简单实现 <asp:TextBox ID="txtBegin" runat=& ...

随机推荐

  1. （保姆级）服务器-Zabbix6.0使用Python脚本实现带图片的邮箱的报警

    前言 近期在琢磨Zabbix邮箱报警的功能,但是网上的教程通常是4.0或5.0版本Zabbix,并使用Python2.7环境,运行在新版本Zabbix6.0上有颇多问题,为此我基于原先教程修改基于Za ...

  2. [转帖]46岁加入谷歌，51岁发明Go，他的编程原则影响了一大批程序员！

    https://www.zhihu.com/tardis/zm/art/551945410?source_id=1005 今年3月,万众瞩目的Go 1.18版本发布,Go终于开始支持泛型了!该版本不仅 ...

  3. 【转帖】GPT4All开源的聊天机器人

    GPT4All是一个开源的聊天机器人,它基于LLaMA的大型语言模型训练而成,使用了大量的干净的助手数据,包括代码.故事和对话.它可以在本地运行,不需要云服务或登录,也可以通过Python或Types ...

  4. 【转帖】3.JVM内存结构概述

    目录 1.JVM内存结构 1.JVM内存结构 在JVM系列的第一篇文章中已经给出了JVM内存结构的简图,下面是JVM内存结构更加详细的图. 同样,JVM的内存结构可以分为上中下3层. 上层主要是类加载 ...

  5. 基于javaPoet的缓存key优化实践

    一. 背景 在一次系统opsreview中,发现了一些服务配置了@Cacheable注解.@cacheable 来源于spring cache框架中,作用是使用aop的方式将数据库中的热数据缓存在re ...

  6. CTT Day3

    T1 忘了叫什么名字 对于一个排列 \(p\),定义它的权值为其有多少个子串是一个值域从 \(1\) 开始的排列.给定排列 \(p\),对于 \(1\le i\le j\le n\),定义 \(f(i ...

  7. 【验证码逆向专栏】某验深知 V2 业务风控逆向分析

    声明 本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容.敏感网址.数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关! 本文章未经许 ...

  8. 使用boot.iso镜像安装Oracle Linux 8

    本文记录使用boot.iso镜像安装Oracle Linux 8. 镜像下载 Oracle Linux 8 boot镜像可以从这里下载. 安装 Oracle Linux 8 boot镜像安装系统跟使用 ...

  9. 强化学习从基础到进阶-常见问题和面试必知必答[8]：近端策略优化（proximal policy optimization，PPO）算法

    强化学习从基础到进阶-常见问题和面试必知必答[8]:近端策略优化(proximal policy optimization,PPO)算法 1.核心词汇 同策略(on-policy):要学习的智能体和与 ...

  10. 知识图谱项目实战(一)：瑞金医院MMC人工智能辅助构建知识图谱--初赛实体识别【1】

    1.技术背景&赛题介绍: A Labeled Chinese Dataset for Diabetes中文糖尿病标注数据集详情请见. 数据集链接:瑞金医院MMC人工智能辅助构建知识数据源:知识 ...