实时计字数提醒的文本框

那天在一个**论坛上看到一个相当有意思的功能，就是在文本框中输入字符的时候，旁边会提示还可以输入多少个字。
自己想了一下应该是用JavaScript实现的，今天把它做出来了。原理很简单就是根据文本框触发的onkeyup事件来获得当前文本框字符的长度，然后文本框允许输入的最大字符数来减去当前的字符数，并用label控件显示出来就可以了。

<html>
<head>
<title>enter</title>
<script language="javascript">
function keypress1() //text输入长度处理
{
   var text1=document.getElementById("mytext1").value;
   var len=15-text1.length;
   var show="你还可以输入"+len+"个字";
   document.getElementById("name").innerText=show;
}
function keypress2() //textarea输入长度处理
{
   var text1=document.getElementById("myarea").value;
   var len;//记录剩余字符串的长度
   if(text1.length>=300)//textarea控件不能用maxlength属性，就通过这样显示输入字符数了
   {
    document.getElementById("myarea").value=text1.substr(0,300);
    len=0;
   }
   else
   {
     len=300-text1.length;
   }
   var show="你还可以输入"+len+"个字";
   document.getElementById("pinglun").innerText=show;
}

</script>
</head>
<body>
<center>
<div style="text-align:left;">
<h>昵称:</h>
<input type="text" id="mytext1" maxlength=15 onKeyUp="keypress1()"/>
<font color="gray"><label id="name">你还可以输入15个字</label></font>
<br>
<h>评论内容:</h><br>
<textarea id="myarea" style="height:100px;width:200px;overflow-x:hidden;overflow-y:hidden" onKeyUp="keypress2()" οnblur="keypress2()"></textarea>
<font color="gray"><label id="pinglun">你还可以输入300个字</label></font>
<div>
</center>

</body>
</html>

运行的界面如下：

实时计字数提醒的文本框相关推荐

PHP检测字数,js判断文本框剩余可输入字数的方法
js判断文本框剩余可输入字数的方法昨天项目上面遇到一个问题,就是在文本框输入的过程中判断剩余可输入是文字数量,百度了一下,找到了一个比较好的解决方法:代码如下: maxLen = 140; //可以 ...
jQuery 监听修改文本框事件
在开发中,有时我们需要对 input 的 value 值变化作实时响应.比如文本输入框的实时字数统计功能,要求文本框内容改变时就要触发相关的统计行为.不管这个内容是键盘输入的,还是鼠标粘贴进来的.1, ...
html文本框自动赋值,js给文本框赋值 value与innerHTML
赋值操作: document.getElementById("testId").value="hello"; value与innerHTML的区别上面的val ...
html文本框php,HTML文本框5种应用方式实现方法
一个简单的文本框,其实当中有很多的功能属性,下面我们就来总结一下,我们平时经常用到的一些属性和用法: 本文主要介绍了限制html文本框input只能输入数字和小数点的方法.具有很好的参考价值.下面跟着 ...
文本框输入位数 html,[求助]请问如何在文本框中限制输入数字的位数（已解决）...
请教一下各位老师: 我设计了一个用于批量打印统计表的小程序,想在文本框中限制输入的业务编号只能是13位,多了少了都不行.自己试了很多次,就是没能在光标移开这个文本框时才执行判断语句,请各位老师指点一下 ...
html文本框的各种用法,HTML文本框5种应用方式实现方法
一个简单的文本框,其实当中有很多的功能属性,下面我们就来总结一下,我们平时经常用到的一些属性和用法: 1.限制html文本框input只能输入数字和小数点的方法本文主要介绍了限制html文本框inp ...
div模拟textarea文本框，输入文字高度自适应，且实现字数统计和限制
需求: 文本框可根据输入内容高度自适应,不带滚动条,高度可变的那种,我搜索了很多,发现textarea无法实现我的需求,scrollHeigh这个无法获取实际内容的高度(我用的是那种简单的,可能我写的 ...
实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
简单的文本框输入实时计数
2019独角兽企业重金招聘Python工程师标准>>> 简单的文本框输入实时计数 $(function(){suminput('idea','60');})//记录输入字符方法fun ...

实时计字数提醒的文本框

实时计字数提醒的文本框相关推荐

最新文章

热门文章