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 ...
随机推荐
- pthon在Notepad++中执行方式
使用 Notepad++ 编辑运行 Python 程序 Notepad++是一个开源的文本编辑器,功能强大而且使用方便.编辑和调试 Python 程序使用什么编辑器或者 IDE不同人有 ...
- iOS 趣谈设计模式——通知
[前言介绍] iOS的一种设计模式,观察者Observer模式(也叫发布/订阅,即Publich/Subscribe模式). 观察者模式,包含了通知机制(notification)和KVO(Key-v ...
- 如何存session,取session
存session: Session["codes"] =要存的session字段 用哈希函数存多个: System.Collections.Hashtable hs = new S ...
- ES6新特性之模板字符串
ES6新特性概览 http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串 http://www.infoq.c ...
- cs端调用Ajax
private static string Descoder() { //ajax地址 string MealFilePath = "http://***/user/SetWebsite.a ...
- 环境搭建 Hadoop+Hive(orcfile格式)+Presto实现大数据存储查询一
一.前言 Hadoop简介 Hadoop就是一个实现了Google云计算系统的开源系统,包括并行计算模型Map/Reduce,分布式文件系统HDFS,以及分布式数据库Hbase,同时Hadoop的相关 ...
- JAVA 通过LDAP获取AD域用户及组织信息
因为工作需求近期做过一个从客户AD域获取数据实现单点登录的功能,在此整理分享. 前提:用户可能有很多系统的情况下,为了方便账号的统一管理使用AD域验证登录,所以不需要我们的系统登录,就需要获取用户的A ...
- 【多线程 5】线程池的类型以及submit()和execute()的区别
就跟题目说的一样,本篇博客,本宝宝主要介绍两个方面的内容,其一:线程池的类型及其应用场景:其二:submit和execute的区别.那么需要再次重申的是,对于概念性的东西,我一般都是从网上挑选截取,再 ...
- python中获取上一个月一号的方法
业务场景: 我们经常会跑一些月级别或者周级别的报表. 周级别的报表还比较好确定,就是七天前的直接用timedelta(days=7)来获取开始日期就可以了; 但是月级别的报表就要麻烦一些,因为time ...
- 41个Web开发者JavaScript实用小技巧
1. 将彻底屏蔽鼠标右键 oncontextmenu="window.event.returnValue=false" < table border oncontextmen ...