js实时计算字数提醒的文本框_表单特效-js教程-PHP中文网

js实时计算字数提醒的文本框_表单特效

php中文网

发布： 2016-05-16 18:23:34

原创

1648人浏览过

自己想了一下应该是用JavaScript实现的，今天把它做出来了。原理很简单就是根据文本框触发的onkeyup事件来获得当前文本框字符的长度，然后文本框允许输入的最大字符数来减去当前的字符数，并用label控件显示出来就可以了。
效果图:
js实时计算字数提醒的文本框_表单特效
演示代码:

Matlab语言的特点中文WORD版

本文档主要讲述的是Matlab语言的特点；Matlab具有用法简单、灵活、程式结构性强、延展性好等优点，已经逐渐成为科技计算、视图交互系统和程序中的首选语言工具。特别是它在线性代数、数理统计、自动控制、数字信号处理、动态系统仿真等方面表现突出，已经成为科研工作人员和工程技术人员进行科学研究和生产实践的有利武器。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

查看详情

<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><center> 
<div style="text-align:left;"> 
<h3>昵称:</h3> 
<input type="text" id="mytext1" maxlength="15" onkeyup="keypress1()"><font color="gray"><label id="name">你还可以输入15个字</label></font>

<h3>评论内容:</h3>
<br><textarea id="myarea" style="height:100px;width:200px;overflow-x:hidden;overflow-y:hidden" onkeyup="keypress2()" onblur="keypress2()"><font color="gray"><label id="pinglun">你还可以输入300个字</label></font> 
<div> 
 
 
 
<br><input onclick="runEx('runcode66343')" type="button" value="运行代码"><input onclick="doCopy('runcode66343')" type="button" value="复制代码"><input onclick="doSave(runcode66343)" type="button" value="保存代码">[Ctrl+A 全选 注:<a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">如需引入外部Js需刷新才能执行</a>]</div>

js实时计算字数提醒的文本框_表单特效

大家都在看：