JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)
一、实现效果:
为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数。
html & JS:
<div>
<textarea name="content" id="content" onkeyup="javascript:checkWords(this);"
onmousedown="javascript:checkWords(this);" ></textarea>
</div>
<div>
还可以输入<span style="font-family: Georgia; font-size: 26px;" id="wordCheck">80</span>个汉字
</div> <script>
var maxstrlen=80;
function Q(s){
return document.getElementById(s);
}
function checkWords(c){
len=maxstrlen;
var str = c.value;
myLen = getStrleng(str);
var wck=Q("wordCheck");
if(myLen>len*2){
c.value=str.substring(0,i+1);
}else{
wck.innerHTML = Math.floor((len*2-myLen)/2);
}
}
function getStrleng(str){
myLen = 0;
i = 0;
for(;(i<str.length)&&(myLen<=maxstrlen*2);i++){
if(str.charCodeAt(i)>0&&str.charCodeAt(i)<128)
myLen++;
else
myLen+=2;
}
return myLen;
} 以上可以动态判断文本框可输入剩余字数,资料来自网络。
JS实现动态提示文本框可输入剩余字数(类似发表微博数字提示)的更多相关文章
- C# 使用js正则表达式,让文本框只能输入数字和字母,最大长度5位
使用js正则表达式,让文本框只能输入数字和字母,最大长度5位,只需要加个onkeyup事件,即可简单实现 <asp:TextBox ID="txtBegin" runat=& ...
- js使用正则表达式实现文本框只能输入数字和小数点
第一种情况:且限制小数点前最大3位数,小数点后最大3为三位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- js验证如何限制文本框只能输入数字
s限制只能数字输入,并且在把输入的“非法字符”清除掉之后将焦点停留在输入非法字符的位置,参考如下:html部分:<input value="" type="text ...
- JQuery+AJAX实现搜索文本框的输入提示功能
平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...
- js控制文本框只能输入中文、英文、数字与指定特殊符号.
先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...
- js限制文本框只能输入数字方法小结(转)
这篇文章主要分享下js代码限制文本框中只能输入数字的多个实例,学习下js控制文本框中输入数字的方法,需要的朋友可以参考下 有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数 ...
- Jquery / js 判断数据类型方法(限制文本框类型输入)
当想要判断文本框中的值是否为自己想要的类型时,可以通过一些方法作出判断,这里对于光标离开文本框时判断文本框中输入的是否是数值类型,如果不是,做出提示 $("#WORKYEARS") ...
- js限制文本框只能输入整数或者带小数点[转]
这篇文章是关于js限制文本框只能输入整数或者带小数点的内容,以下就是该内容的详细介绍. 做表单验证的时候是否会碰到验证某个输入框内只能填写数字呢,仅允许输入整数数字或者带小数点的数字.下面这段代码也许 ...
- JS控制文本框textarea输入字数限制
<html> <head> <title>JS限制Textarea文本域字符个数</title> <meta http-equiv="C ...
随机推荐
- poi导出excel通用类
一.关键的通用类public class PoiExportUtils { private static HSSFWorkbook workBook; public PoiExportUtils ...
- FPGA综合工具--Synplify Pro的常用选项及命令
最近要用到Synplify,但以前没使用过,无基础,找到一篇帖子,隧保存下来. 本文转自:http://blog.sina.com.cn/s/blog_65fe490d0100v8ax.html Sy ...
- assert断言基础用法
Python的assert是用来检查一个条件,如果它为真,就不做任何事.如果它为假,则会抛出AssertError并且包含错误信息
- mapreduce核心原理
1:第一阶段: 第一阶段的task每一个nodemanager并发运行程序,完全并发,各不影响.这就是map阶段 运行的task时maptask 2:第二个阶段的task并发实例互不相干,但是他们的数 ...
- nodejs——qureystring的作用
当node服务器向另一个服务器发送数据时,首先要转换成字符串再post或者get,这个时候就要用到node内置的这个包querystring, querystring.stringify(data);
- cursor 鼠标样式——属性
取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-res ...
- Ninject之旅之八:Ninject插件模型(附程序下载)
摘要 在前面的章节中,我们看了在单一的绑定条件下Ninject能够处理依赖类型,就是说,每个服务类型只绑定到单一的实现类型.然而,有些情况下我们需要绑定一个抽象服务类型到多个实现,这叫多个绑定.多个绑 ...
- Lua面向对象----类、继承、多继承、单例的实现
(本文转载)学习之用,侵权立删! 原文地址 http://blog.csdn.net/y_23k_bug/article/details/19965877?utm_source=tuicool&a ...
- ApexSQLLog总结
我们程序最近做更新,要做新功能的测试.程序经常出现大的事务,每次commit之后如果发现数据不对的问题也不能再回滚进行断点调试了,因为数据库数据已经更改了,所以一直想找一个回滚我数据库所有操作的工具. ...
- mysql自动添加最后修改时间
字段不为空 NOT NULL 类型 :timestamp 默认值 :CURRENT_TIMESTAMP