JS 限制input框的输入字数，并提示可输入字数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>限制文件字数字</title>
</head>
<body>
<span class="span">备注信息</br><span id="stay" style="display: none"> 您还可以输入:<span id="txtCount"></span>个字符的描述信息</span></span>
</br><input id="Remark_information" name="Remark_information" type="text">
<script>
var lim=new limit();
lim.txtNote=document.getElementById("Remark_information");
lim.txtLimit=document.getElementById("txtCount");
lim.limitCount=80;
lim.init();
function limit(){
var txtNote;//文本框
var txtLimit;//提示字数的input
var limitCount;//限制的字数
var txtlength;//到达限制时，字符串的长度
this.init=function(){
txtNote=this.txtNote;
txtLimit=this.txtLimit;
limitCount=this.limitCount;
txtNote.oninput=function(){wordsLimit()};txtNote.oninput=function(){wordsLimit()};
txtLimit.innerText=limitCount;
};
function wordsLimit(){
var noteCount=txtNote.value.length;
var InPut=document.getElementById("Remark_information").value.length;
if(InPut<1){
document.getElementById("stay").style.display="none";
return
}
if(InPut>=1){
document.getElementById("stay").style.display="inline";
document.getElementById("stay").style.color="green";
}
if(InPut>70){
document.getElementById("stay").style.color="red";
}
if(noteCount>limitCount){
txtNote.value=txtNote.value.substring(0,limitCount);
txtLimit.innerText=0;
}else{
txtLimit.innerText=limitCount-noteCount;
}
txtlength=txtNote.value.length;//记录每次输入后的长度
}
}
</script>
</body>
JS 限制input框的输入字数，并提示可输入字数的更多相关文章
- js控制input框输入数字时，累计求和
input框输入数字时,自动开始计算累加 <div class="form-group"> <label for="inputPassword3&quo ...
- js 动态控制 input 框 的只读属性
需求: 当下拉框的值为06即Voucher时, 文本框才可输入, 其他情况均为置灰不可录入状态. 问题: 设置input框的只读属性写成了readonly="true" 尼玛,坑死 ...
- php页面输出时，js设置input框的选中值
/* 设置表单的值 */ function setValue(name, value) { var first = name.substr(0, 1), input, i = 0, val; if ( ...
- js控制 input框中输入数字时，累计求和
$('.cc input').bind('input propertychange', function(){ var total = 0; $("input").each(fun ...
- js控制input框只能输入数字和一位小数点和小数点后面两位小数
<script language="JavaScript" type="text/javascript"> function clearNoNum( ...
- Js限制Input框只能输入数字
<input type="text" onkeyup="value=value.replace(/[^\d]/g,'')" /> <input ...
- js复制input 框中的值
function copy(){ var Url2=document.getElementById("copyValue"); Url2.select(); document.ex ...
- js对input框的可编辑属性设置
添加disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("disabled& ...
- 关于input框仿百度/google自动提示的方法
引入jquery-autocomplete文件 链接:https://pan.baidu.com/s/1hW0XBYH8ZgJgMSY1Ce6Pig 密码:tv5b $(function() { $( ...
随机推荐
- RabbitMQ学习之messageconver插件实现(Gson)
RabbitMQ已经实现了Jackson的消息转换(Jackson2JsonMessageConverter),由于考虑到效率,如下使用Gson实现消息转换. 如下消息的转换类的接口MessageCo ...
- 优动漫PAINT动画创作功能介绍
优动漫PAINT也就是我们常说的clip studio paint(CSP)的中文版本,它是一款功能强大的漫画.插画绘制软件,它搭载了绘制漫画和插画所需的所有功能,包括丰富的笔工具.超强的笔压感应和手 ...
- Java并发-J.U.C之AQS
AQS(Abstract Queue Synchronizer)介绍 [死磕Java并发]—–J.U.C之AQS(一篇就够了) 下面讲解具体的Java并发工具类 1 CountDownLatch 参考 ...
- 从U盘安装CentOS7.3教程（转载）
0.准备工作: 一台没系统的普通电脑u盘一个(大于1G,最小安装的话不超过1G,根据选择系统大小匹配U盘即可) CentOS7.3 iso文件一个UltraISO工具 1.制作U盘 ①使用UltraI ...
- css+div 绘制多边形
/*1.正方形*/ <div id="square"></div> #square { width: 100px; height: 100px; backg ...
- HDU2516 - 取石子游戏【斐波那契博弈】
基本描述 有一堆个数为n的石子,游戏双方轮流取石子,满足: 先手不能再第一次把所有石子取完: 之后每次可以取的石子数介于1到对手刚取的石子数的2倍之间,包括1和对手取的石子数的2倍. 取最后石子的人 ...
- Python 从入门到实践 - Web应用程序
一.创建项目 1.建立虚拟环境 python -m venv ll_env # 出现ll_env文件夹 2.激活虚拟环境 source ll_env/bin/activate # 要停止使用虚拟环境, ...
- Java中发邮件的6种方法
1.官方标准JavaMail Sun(Oracle)官方标准,功能强大,用起来比较繁琐. 官方资料:http://www.oracle.com/technetwork/java/javamail/in ...
- jsp js action之间传值
1.struts2 action如何向JSP的JS函数传值 action中定义变量 public class TestAction extends ActionSupport implements S ...
- 2、链接数据库+mongodb基础命令行+小demo
链接数据库并且打印出数据的流程:1.在CMD里面输入 mongod 2.在CMD里面输入 mongo 3.在输入mongodb命令行里面进行操作,首先输入 show dbs 来查看是否能够链接得上库4 ...