一、实现效果:

为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数。

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实现动态提示文本框可输入剩余字数(类似发表微博数字提示)的更多相关文章

  1. C# 使用js正则表达式,让文本框只能输入数字和字母,最大长度5位

    使用js正则表达式,让文本框只能输入数字和字母,最大长度5位,只需要加个onkeyup事件,即可简单实现 <asp:TextBox ID="txtBegin" runat=& ...

  2. js使用正则表达式实现文本框只能输入数字和小数点

    第一种情况:且限制小数点前最大3位数,小数点后最大3为三位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  3. js验证如何限制文本框只能输入数字

    s限制只能数字输入,并且在把输入的“非法字符”清除掉之后将焦点停留在输入非法字符的位置,参考如下:html部分:<input value="" type="text ...

  4. JQuery+AJAX实现搜索文本框的输入提示功能

    平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...

  5. js控制文本框只能输入中文、英文、数字与指定特殊符号.

    先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...

  6. js限制文本框只能输入数字方法小结(转)

    这篇文章主要分享下js代码限制文本框中只能输入数字的多个实例,学习下js控制文本框中输入数字的方法,需要的朋友可以参考下   有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数 ...

  7. Jquery / js 判断数据类型方法(限制文本框类型输入)

    当想要判断文本框中的值是否为自己想要的类型时,可以通过一些方法作出判断,这里对于光标离开文本框时判断文本框中输入的是否是数值类型,如果不是,做出提示 $("#WORKYEARS") ...

  8. js限制文本框只能输入整数或者带小数点[转]

    这篇文章是关于js限制文本框只能输入整数或者带小数点的内容,以下就是该内容的详细介绍. 做表单验证的时候是否会碰到验证某个输入框内只能填写数字呢,仅允许输入整数数字或者带小数点的数字.下面这段代码也许 ...

  9. JS控制文本框textarea输入字数限制

    <html> <head> <title>JS限制Textarea文本域字符个数</title> <meta http-equiv="C ...

随机推荐

  1. eclipse下的webservice开发

    关于eclipse下的webservice开发,有非常多的教程,这里只记下学习过程中的弯路: 1.无论是CXF模式还是AXIS模式,在出现start server之后,点击next报错:"s ...

  2. Oracle基础笔记

    =====================================第一章:oracle数据库基础============================================= Or ...

  3. get application power

    1. http://blog.csdn.net/sjz_iron/article/details/8726661 http://www.16rd.com/home.php?mod=space& ...

  4. 慕课网-Java入门第一季-7-1 如何定义 Java 中的方法

    来源:http://www.imooc.com/code/1577 所谓方法,就是用来解决一类问题的代码的有序组合,是一个功能模块. 一般情况下,定义一个方法的语法是: 其中: 1. 访问修饰符:方法 ...

  5. 几种常见 容器 比较和分析 hashmap, map, vector, list ...hash table

    list支持快速的插入和删除,但是查找费时; vector支持快速的查找,但是插入费时. map查找的时间复杂度是对数的,这几乎是最快的,hash也是对数的.  如果我自己写,我也会用二叉检索树,它在 ...

  6. java路径问题

    使用了java这么久一直对java获取路径存在困惑,将一些常用的获取路径方式记录如下: val property = System.getProperty("user.dir")) ...

  7. C#运算符大全_各种运算符号的概述及作用

    一.[]方括号 ([]) 用于数组.索引器和属性,也可用于指针. 1.数组类型是一种后跟 [] 的类型:int[] fib = new int[100]; //创建一个有100元素的数组若要访问数组的 ...

  8. 仿Spring读取配置文件实现方案

    一.读取config和jar里的配置文件,以流的方式返回 /** * 根据路径,获取当前项目中路径(jar包和config文件)下的配置文件 * @param filePath 存放job配置信息文件 ...

  9. JavaBean,POJO,VO,DTO的区别和联系

    JavaBeans A JavaBean is a class that follows the JavaBeans conventions as defined by Sun. Wikipedia ...

  10. SpringMVC学习笔记(二)

    一.HandleMapping和HandlerAdapter的讲解 HandleMapping:处理映射器,可以理解为为请求的url查找对应的Controller类. HandlerAdapter:可 ...