效果图

<!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. C++模板元编程----堆排序

    目录 目录 前言 实现的一些小细节 Debug 惰性求值 总结 Ref 前言 经过前两次经验的积累,终于来到了麻烦的堆排序.在一开始接触模板元编程的时候,我就期望有一天能够写出元编程堆排序的代码.原因 ...

  2. springboot 日期参数前后台转换问题

    方式 一: 在实体类上加@DatetimeFormat与@JsonFormat注解 @DatetimeFormat:将前台日期字符串转换成Date格式 @DateTimeFormat(pattern= ...

  3. windows10系统修改JDK版本后配置环境变量不生效怎么办

    之前安装了个jdk8版本,今天突然想安装个更新版本的jdk11来用,但在安装好JDK11并配置环境变量后发现修改JDK版本后配置的环境变量不生效的.本文就给大家分享一下windows10系统修改JDK ...

  4. flume将数据写入各个组件

    一.flume集成hdfs,将数据写入到hdfs           a1.sources = r1           a1.sinks = k1           a1.channels = c ...

  5. 你真会看idea中的Log吗？

    在项目中提交代码时,我们时常忘了自己是否已经update代码或者push代码了,或者以为自己push,但是别人说你的代码没push,其实可以通过idea的Log日志中查看,你会发现里面有三种颜色的标签 ...

  6. MySQL--运行机制,SQL执行顺序,Explain

    MySQL的运行机制是什么?  首先客户端先要发送用户信息去服务器端进行授权认证,当输入正确密码之后可以连接到数据库了,当连接服务器端成功之后就可以正常的执行 SQL 命令了,MySQL 服务器拿到 ...

  7. Akka Typed 官方文档之随手记

    ️ 引言 近两年,一直在折腾用FP与OO共存的编程语言Scala,采取以函数式编程为主的方式,结合TDD和BDD的手段,采用Domain Driven Design的方法学,去构造DDDD应用(Dom ...

  8. go语言中运算符

    Go语言学习笔记(运算符)-day01 go语言中与其他语言一样,存在多种运算符,下表列出了go语言中的运算符类型 算数运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 算数运算符 运算符 描述 ...

  9. VRP CommandLines

    <> 用户视图 通过 system-view 进入系统视图 [] 系统视图 通过interface 0/0/0 进入接口视图 CTRL+Z 返回用户视图 CTRL+A 把光标移动到当前命令 ...

  10. Facetoobject_encapsulation

    面向对象程序设计思想 一.思想 处处皆对象. 当提到某一功能时,首先应该想有没有实现该功能的对象,有则调用,没有则创建类.当提到数据时,应该想到属于哪个对象. 1.求1~n的累加和 public cl ...