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 ...
随机推荐
- 自己用c语言实现字符串处理库函数以及扩展
1.实现基本的c语言库函数: int myStrlen( const char* str);//根据传入的字符串首地址获取字符串长度:返回值为长度 int myStrlen(const char* s ...
- 在linux中配置安装telnet服务
Telnet 是一种流行的用于通过 Internet 登录到远程计算机的协议.Telnet 服务器软件包为远程登录主机提供了支持.要通过 Telnet 协议与另一台主机通讯,您可以使用名称或 Inte ...
- css狂记
接着上一篇 html狂记,同样是DIV+CSS传统站点开发,同样只是收集.整理... CSS 背景属性(Background) 属性 描述 CSS background 在一个声明中设置所有的背景属性 ...
- 【练习】数据移动---导出(EXPDP)
1.导出表: [oracle@host03 datadump]$ expdp scott/tiger directory=dir_dp dumpfile=emp.dmp tables=emp; Exp ...
- 谈谈Java面向对象的三大特性
Java面向对象的三大特性就是指封装.继承.多态了. 一.封装: 概念:封装是指隐藏对象的属性和实现细节,仅对外提供公共访问方式. (举例:笔记本电脑就是一个封装体,Java语言中最小的封装体就是函数 ...
- 《循序渐进》之简单的DHCP实验
目的:初学,配置简单的DHCP试验. 试验步骤: 1:拓扑图 2:配置: Router>en Router#config t Enter configuration commands, one ...
- Shaders(读书笔记4 --- Real-Time rendering)
1. vertex,pixel以及geometry shaders共享一个programming model,即common-shader core,在GPU架构中的unified shader可以和 ...
- 金山云—ubuntu-web服务器完整部署笔记
金山云-ubuntu-web (jdk环境配置+tomcat配置+nginx反向代理)服务器完整部署文档第一步:挂载数据盘 参考金山云帮助文档 http://www.ksyun.com/doc/art ...
- <读书笔记>软件调试之道 :从大局看调试-发现代码存在问题
声明:本文档的内容主要来源于书籍<软件调试修炼之道>作者Paul Butcher,属于读书笔记.欢迎转载! ---------------------------------------- ...
- JAVA-系统-【3】-java应用连接oracle正常,但是网页却报错java.lang.ClassNotFoundException: oracle.jdbc.driver.OracleDriver
这是因为jar包已经导入了项目的应用部分,网页的lib去没有导入. 导入以后还要刷新项目,最好重启tomcat,就解决了..