效果图

<!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. TurtleBot3 Waffle （tx2版华夫）（5）激活你的雷达

    重要提示:请在配网通信成功后进行操作,配网后再次开机需要重新验证通信: 重要提示:[Remote PC]代表PC端.[TurtelBot]代表树莓派端: 5.1．操作步骤 1)[Remote PC]  ...

  2. Java通过jni调用动态链接库

    (1)JNI简介 JNI是Java Native Interface的缩写,它提供了若干的API实现了Java和其他语言的通信(主要是C&C++).从Java1.1开始,JNI标准成为java ...

  3. git基础-git别名

    Git 并不会在你输入部分命令时自动推断出你想要的命令. 如果不想每次都输入完整的 Git 命令,可以通过 git config 文件来轻松地为每一个命令设置一个别名. 这里有一些例子你可以试试: $ ...

  4. C#扫盲篇（二）依赖倒置•控制反转•依赖注入•面向接口编程--满腹经纶的说

    扫盲系列的文章收到了广大粉丝朋友的支持,十分感谢,你们的支持就是我最大动力. 我的扫盲系列还会继续输出,本人也是一线码农,有什么问题大家可以一起讨论.也可以私信或者留言您想要了解的知识点,我们一起进步 ...

  5. Spring Security OAuth2.0认证授权三：使用JWT令牌

    Spring Security OAuth2.0系列文章: Spring Security OAuth2.0认证授权一:框架搭建和认证测试 Spring Security OAuth2.0认证授权二: ...

  6. openstack octavia的实现与分析（一）openstack负载均衡的现状与发展以及lvs，Nginx，Haproxy三种负载均衡机制的基本架构和对比

    [负载均衡] 大量用户发起请求的情况下,服务器负载过高,导致部分请求无法被响应或者及时响应. 负载均衡根据一定的算法将请求分发到不同的后端,保证所有的请求都可以被正常的下发并返回. [主流实现-LVS ...

  7. java调用js代码

    jdk8里使用脚本引擎调用js 1.定义一个js方法: function getRouteInfo(province){ //注意,参数不要带var..在java里执行会报错.. if (provin ...

  8. Linux tar压缩和解压

    经常会忘记 tar 压缩和解压命令的使用,故记下来. 1. 打包压缩 tar -zcvf pack.tar.gz pack/ #打包压缩为一个.gz格式的压缩包 tar -jcvf pack.tar. ...

  9. 没搞清楚网络I/O模型？那怎么入门Netty

    微信搜索[阿丸笔记],关注Java/MySQL/中间件各系列原创实战笔记,干货满满. 本文是Netty系列笔记第二篇 Netty是网络应用框架,所以从最本质的角度来看,是对网络I/O模型的封装使用. ...

  10. P2979 [USACO10JAN]奶酪塔Cheese Towers（完全背包，递推）

    题目描述 Farmer John wants to save some blocks of his cows' delicious Wisconsin cheese varieties in his ...