效果图

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE></TITLE>
<LINK href="css/User_Login.css" type=text/css rel=stylesheet>
<META http-equiv=Content-Type content="textml; charset=utf-8">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</HEAD>
<script type="text/javascript">

$().ready(function(){
var ty = document.getElementById("cty");
var motto=document.getElementById("motto");
var curLen=document.getElementById("curLen");
var maxLen=document.getElementById("maxLen");
var leftLen=document.getElementById("leftLen");
motto.onkeyup= function () {
maxLength = parseInt(maxLen.firstChild.nodeValue);
this.value = this.value.substr(0,maxLength);
var len = this.value.length;
curLen.firstChild.nodeValue = len;
leftLen.firstChild.nodeValue = maxLength-len;
};
//shade(ty);
});

</script>
<BODY>
<label>
<textarea name="motto" id="motto"></textarea>
<br/>
<em>
<span id="curLen">0</span>/<span id="maxLen">200</span>字， 还能输入<span id="leftLen">200</span>字！
</em>
</label>
</BODY>
</HTML>

html输入框输入显示剩余字数的更多相关文章

  1. android中实现在矩形框中输入文字，可以显示剩余字数的功能

    虽然这两个功能都比较简单,但是在实际app开发中真的很常见,特别是显示字数或剩余字数这个功能 如下图: 要实现上面的功能,需要做到三点: 1.实现矩形框布局 思路就是矩形框作为整个布局的一个backg ...

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

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

  3. textarea标签提示录入剩余字数

    textarea标签提示录入剩余字数 <textarea onkeydown="checkMaxInput(this,300)" onkeyup="checkMax ...

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

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

  5. input、textArea实时显示剩余可输入的字数

    <h2>实时显示剩余可输入的字数(字母,数字,中文都算一个字)</h2> <h>昵称:</h> <div> <input type=& ...

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

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

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

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

  8. 页面上有3个输入框：分别为max，min，num；三个按钮：分别为生成，排序，去重；在输入框输入三个数字后，先点击生成按钮，生成一个数组长度为num，值为max到min之间的随机整数点击排序，对当前数组进行排序，点击去重，对当前数组进行去重。 每次点击之后使结果显示在控制台

    <!DOCTYPE html> <html> <head> <!-- 页面上有3个输入框:分别为max,min,num:三个按钮:分别为生成,排序,去重: 在 ...

  9. JS 控制输入框输入表情emoji 显示在页面上

    问题描述: 最近做一个评论回复的功能遇到了用户输入框输入表情,存入数据库的时候转变成了问号??? 起初为了避免这个问题,做了一个过滤表情的控制 var inputText = $('#pinglun' ...

随机推荐

  1. 这些JS技巧，看看你是否都会用？

    问题1:以下代码在浏览器控制台上会打印什么? var a = 10; function foo() { console.log(a); // ?? var a = 20; } foo(); 问题2:如 ...

  2. mysql锁类型

    mysql锁类型 问题 都有哪些锁 锁与隔离级别的关系 sql语句中涉及都涉及哪些锁 事务中,锁何时释放 死锁检测机制 概要

  3. 注意力论文解读(1) | Non-local Neural Network | CVPR2018 | 已复现

    文章转自微信公众号:[机器学习炼丹术] 参考目录: 目录 0 概述 1 主要内容 1.1 Non local的优势 1.2 pytorch复现 1.3 代码解读 1.4 论文解读 2 总结 论文名称: ...

  4. 风炫安全WEB安全学习第二十节课 反射型XSS讲解

    风炫安全WEB安全学习第二十节课 反射型XSS讲解 反射性xss演示 原理讲解 如果一个应用程序使用动态页面向用户显示错误消息,就会造成一种常见的XSS漏洞.通常,该页面会使用一个包含消息文本的参数, ...

  5. 「珍贵历史资料鉴赏」CF786B 题解

    写在前面 偶然翻到一篇 2019-08-07 18:58 写的未发布的题解. 给大家找点乐子玩. 正文 知识点:线段树优化建图 线段树优化建图 用于解决 类似 从 x 向区间[L,R]的 区间连边问题 ...

  6. idea生成UML

    原文链接http://zhhll.icu/2020/12/18/idea/%E7%94%9F%E6%88%90UML/ 使用idea直接生成UML类图 然后点击所要生成的类即可生成 由于本身的博客百度 ...

  7. 使用Java语言编写一个五子棋UI界面并实现网络对战功能（非局域网）

    使用Java语言编写一个五子棋UI界面并实现网络对战功能(非局域网) 一,前期准备 1,Java IDE(Eclipse)与JDK的安装与配置jdk-15.0.1-免配置路径版提取码:earu免安装版 ...

  8. LeetCode222 判断是否为完全二叉树并求节点个数

    给出一个完全二叉树,求出该树的节点个数. 说明: 完全二叉树的定义如下:在完全二叉树中,除了最底层节点可能没填满外,其余每层节点数都达到最大值,并且最下面一层的节点都集中在该层最左边的若干位置.若最底 ...

  9. Tengine 四层代理：

    Tengine 四层代理: 1 ) 安装tengine ( nginx1.9 以上版本 编译以后要支持stream 模块) 1.1 ) tengine(nginx) 一定要是nginx-1.9.X 以 ...

  10. GitHub README.md文本编写指南

    标题 在文字前写#,注意文字与#之间有一个空格 # 一级标题## 二级标题### 三级标题 以此类推或者用连续的减号或等号写在文字之下: 标题- 粗体斜体 **这个是粗体*这个是斜体****这个是粗体 ...